javascript - 是否可以将 FileReader readAsArrayBuffer 数据转换为 html5 canvas 兼容的 imageData

Question

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

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

然而，对于我不需要深入探讨的特定情况，如果可能的话，我想完全绕过图像数据的加载。

由于 filereader api 支持 readAsArrayBuffer() 我想知道是否有任何方法可以获取此 arraybuffer 并将其转换为 canvas imageData 以便使用 ctx.putImageData(array) 来呈现图片。

提前致谢。

Answer 1

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

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

// 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);
            }
        })();
    };