我正在使用文件输入元素从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？

回答

示例代码

相关问题