是否可以将 FileReader readAsArrayBuffer 数据转换为兼容 html5 画布的 imageData答案

【问题标题】：Is it possible to convert FileReader readAsArrayBuffer data into html5 canvas compatible imageData是否可以将 FileReader readAsArrayBuffer 数据转换为兼容 html5 画布的 imageData
【发布时间】：2013-03-14 12:23:57
【问题描述】：

我正在寻找一种直接从 html5 FileReader api 将图像绘制到画布上的方法。

通常的方法是新建一个图像对象，等待onload，然后用drawImage()将其绘制到画布上。

但是对于我不需要进入的特定情况，如果可能的话，我想完全绕过图像数据的加载。

由于 filereader api 支持readAsArrayBuffer()，我想知道是否有任何方法可以获取此数组缓冲区并将其转换为画布 imageData 以便使用 ctx.putImageData(array) 来渲染图像。

提前致谢。

【问题讨论】：

标签： javascript canvas filereader

【解决方案1】：

我认为加载图像是一个必要的步骤；在该过程的一端，您只有一个二进制 blob，它可以是 JPEG 或 PNG（或 BMP，任何其他 mime 类型），而在另一端，您有一个包含原始像素数据的数组。虽然您可以在技术上自己编写此转换的代码，但 fileReader.readAsDataURL 和 ctx.drawImage 方法会在内部为您执行此操作。

FWIW，他就是我在画布上绘制图像的方式。

// read binary data from file object
var fileRead = function(file){
    var reader = new FileReader();
    reader.onload = fileReadComplete;
    reader.readAsDataURL(file);
    };

// convert binary data to image object
var fileReadComplete = function(e){
    var img = new Image();
    img.src = e.target.result;
    (function(){
        if (img.complete){
            ctx.drawImage(img);
            }
        else {
            setTimeout(arguments.callee, 50);
            }
        })();
    };

【讨论】：

我也是这样做的。我玩过使用 createimagedata 并循环通过 typedarray 但图像出现乱码。很遗憾，因为这对于 webworker 中的这个特定应用程序来说是完美的。它将允许能够将巨大的图像发送给工作人员，而无需克隆它。不管怎么说，还是要谢谢你。我会尽快将问题标记为已回答。