我正在使用文件輸入元素從android瀏覽器捕捉圖像。現在我想將blob數據轉換爲ImageData，以便我可以使用putImageData在畫布上呈現它。在JavaScript中將Blob /文件數據轉換爲ImageData？

<!DOCTYPE html> 
<html> 

<body> 
    <input type="file" id="file" /> 
</body> 

<script> 
    function handleFileSelect(evt) { 

     var files = evt.target.files; // FileList object 

     var selFile = files[0]; 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
     var blobData = e.target.result;  
      console.log(e.target.result); 
     }; 

     reader.onerror = function(e) { 
      console.log(e); 
     }; 
     reader.readAsArrayBuffer(selFile); 
    } 


    document.getElementById('file').addEventListener('change',handleFileSelect, false); 
</script> 

</html>

在上面的代碼中，如何將blobData轉換爲ImageData？在此先感謝。

來源

2015-08-28 vrs

如果您要使用putImageData()，您將不得不手動解碼和解壓縮自己的文件，以獲取您將轉換爲畫布位圖的位圖。

有幸運的是沒有必要的 -

你輸入元素獲取文件對象可以直接用作blob對象。所以我們需要做的就是創建一個臨時對象URL，以便我們可以將它用作圖像源。

創建一個Image對象，將Object URL設置爲源，加載時只需將圖像繪製到畫布上。如果您想保留圖像供以後使用，請將其定義在處理程序之外。撤銷URL以釋放內存很重要。

請注意，您可能需要前綴URL對象在某些瀏覽器 - 你可以這樣做是爲了覆蓋：

window.URL = window.URL || window.webkitURL;

示例代碼

document.querySelector("input").onchange = function(e) { 
 

 
    var file = e.target.files[0],     // reference first file BLOB 
 
     url = URL.createObjectURL(file),   // create an Object URL 
 
     img = new Image();       // create a temp. image object 
 
    
 
    img.onload = function() {     // handle async image loading 
 
     URL.revokeObjectURL(this.src);    // free memory held by Object URL 
 
     c.getContext("2d").drawImage(this, 0, 0); // draw image onto canvas (lazy method™) 
 
    }; 
 

 
    img.src = url;        // start convertion file to image 
 
};

#c {border: 1px solid #000}

Chose an image: <input type=file><br> 
 
<canvas id=c width=600 height=400></canvas>

要獲得ImageData只需致電：

var idata = context.getImageData(0, 0, width, height);

將圖像繪製到畫布後。

來源

2016-04-04 04:43:35 K3N

在JavaScript中將Blob /文件數據轉換爲ImageData？

回答

示例代碼

相關問題