8

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

4

1 回答 1

8

如果要使用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);

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

于 2016-04-04T04:43:35.533 回答