【问题标题】：Converting Blob/File data to ImageData in javascript?在 javascript 中将 Blob/文件数据转换为 ImageData？
【发布时间】：2015-08-28 14:02:51
【问题描述】：

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

【问题讨论】：

标签： html html5-canvas html5-filesystem getimagedata putimagedata

【解决方案1】：

如果您要使用putImageData()，您必须自己手动解码和解压缩文件以获得位图，然后将其转换为画布位图。

幸好没必要——

你从输入元素中得到的 File 对象可以直接用作 blob 对象。所以我们需要做的就是为它创建一个临时的Object 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);

在图像被绘制到画布之后。

【讨论】：