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

Question

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

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

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

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

提前致谢。

Answer 1

我认为加载图像是一个必要的步骤；在该过程的一端，您只有一个二进制 blob，它可以是 JPEG 或 PNG（或 BMP，任何其他 mime 类型），而在另一端，您有一个包含原始像素数据的数组。虽然您可以在技术上自己编写此转换的代码，但fileReader.readAsDataURLandctx.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);
            }
        })();
    };