是否有可能將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); 
      } 
     })(); 
    };