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

我正在寻找一种直接从html5文件阅读器api将图像绘制到画布的方法

通常的方法是创建一个新的图像对象，等待onload，然后使用

drawImage（）

将其绘制到画布上

然而，对于一个我不需要讨论的特定情况，如果可能的话，我希望完全绕过图像数据的加载

由于filereader api支持

readAsArrayBuffer（）

，我想知道是否有任何方法可以使用此arraybuffer并将其转换为canvas imageData，以便使用ctx.putImageData（array）渲染图像

---

提前感谢。

我认为加载图像是必要的步骤；在这个过程的一端，您只有一个二进制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中的这个特定应用程序来说是完美的。它将允许向工作人员发送巨大的图像，而无需克隆图像。无论如何，谢谢你。我会尽快把这个问题标记为已回答。