将 Blob/File 数据转换为 javascript 中的 ImageData？

Question

我正在使用文件输入元素从 android 浏览器捕获图像。现在我想将 blob 数据转换为 ImageData 以便我可以使用 putImageData.

在 canvas 上渲染它

<!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？提前致谢。

Answer 1

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

幸运的是不需要那个-

从input元素中获取的File对象可以直接作为blob对象使用。所以我们需要做的就是为它创建一个临时对象URL，这样我们就可以将它用作图像源。

创建一个图像对象，将对象 URL 设置为源，加载时只需将图像绘制到 canvas 上。如果您想保留图像供以后使用，请在处理程序之外定义它。重要的是撤销 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);

图像绘制到canvas后。

将 Blob/File 数据转换为 javascript 中的 ImageData？

Converting Blob/File data to ImageData in javascript?

html

getimagedata

html5-canvas

html5-filesystem

putimagedata

示例代码