Gan*_*h K 6 html5 getimagedata html5-canvas html5-filesystem putimagedata
我正在使用文件输入元素从android浏览器捕获图像。现在，我想将Blob数据转换为ImageData，以便可以使用来将其呈现在画布上putImageData。
<!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？提前致谢。
小智 6
如果要使用putImageData()，则必须自己对文件进行手动解码和解压缩以获得位图，然后将其转换为画布位图。
幸运的是，没有必要-
从输入元素获取的File对象可以直接用作blob对象。因此，我们要做的就是为其创建一个临时的Object URL，以便可以将其用作图像源。
创建一个Image对象，将Object URL设置为源，加载后只需将图像绘制到画布上即可。如果要保留图像供以后使用，请在处理程序外部定义它。撤销URL以释放内存很重要。
请注意，您可能需要在某些浏览器中为URL对象添加前缀-您可以执行以下操作：
window.URL = window.URL || window.webkitURL;
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}为了让ImageData您轻松致电：
var idata = context.getImageData(0, 0, width, height);
将图像绘制到画布上之后。