示例代码

Question

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

Answer 1

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

幸运的是没有必要 -

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

创建一个Image对象，将Object URL设置为source，加载时只需将图像绘制到画布上即可。如果要保留图像供以后使用，请在处理程序之外定义它。重新启动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);

将图像绘制到画布后

。

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

1 个答案:

示例代码