Question

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

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

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

由于filereader api支持readAsArrayBuffer()，我想知道是否有任何方法可以使用此arraybuffer并将其转换为canvas imageData以便使用ctx.putImageData（array）来渲染图像。

提前致谢。

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

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

1 个答案: