是否有可能将FileReader readAsArrayBuffer数据转换为html5 canvas兼容imageData

Question

我正在寻找一种方法将图像直接从html5 FileReader API中绘制到画布上。

通常的方法是创建一个新的图像对象，等待onload，然后用drawImage()将其绘制到画布上。

但是，对于一个我不需要进入的特定情况，我希望完全绕过图像数据的加载。

由于filereader api支持readAsArrayBuffer()我想知道是否有任何方法可以使用此缓冲区并将其转换为canvas imageData以便使用ctx.putImageData（array）来渲染图像。

在此先感谢。

Answer 1

加载图像是我想的必要步骤;在这个过程的一端，你只需要一个二进制blob，它可以是JPEG或PNG（或BMP，任何其他MIME类型），而另一端则有一个包含原始像素数据的数组。虽然您可以自己在技术上对此转换进行编码，但fileReader.readAsDataURL和ctx.drawImage方法可以在内部为您执行此操作。

FWIW，他是我如何画一幅画。

// read binary data from file object 
var fileRead = function(file){ 
    var reader = new FileReader(); 
    reader.onload = fileReadComplete; 
    reader.readAsDataURL(file); 
    }; 

// convert binary data to image object 
var fileReadComplete = function(e){ 
    var img = new Image(); 
    img.src = e.target.result; 
    (function(){ 
     if (img.complete){ 
      ctx.drawImage(img); 
      } 
     else { 
      setTimeout(arguments.callee, 50); 
      } 
     })(); 
    };