Question

我正在整天尝试使用xhr请求作为数组缓冲区检索图像。我收到了回复，然后我想把arraybuffer放到canvas imagedata中，据我所知它接受Uint8ClampedArray如下：

imageData.data.set(new Uint8ClampedArray(arraybuffer));

我失败了，就像FileReader在使用FileReader.readAsArrayBuffer()时无法解析数据一样。虽然我不需要base64解决方案，但如果我使用FileReader.readAsDataURL()，它可以正常工作。

此外还有一个小 fiddle

这不是浏览器特定的问题，因为我在chrome和firefox上测试过它。我对以某种方式正确解析arraybuffer特别感兴趣，因为我在three.js中使用了transferable objects和Datatextures的网络工作者。

用于演示目的的来源

var canvas = document.createElement("canvas");

canvas.width = 45; 
canvas.height = 32; 
canvas.style.position = "fixed"; 
canvas.style.zIndex = 999999;

var ctx = canvas.getContext("2d"); var xhr = new XMLHttpRequest();

xhr.open( "GET", "https://fiddle.jshell.net/img/logo.png", true ); xhr.responseType = "arraybuffer";

xhr.onload = function( e ) {

    var blob = new Blob( [ xhr.response ], { type: "image/png" } );     
    var fileReader = new FileReader();

    fileReader.onload = function(evt) {

        var imageData = ctx.createImageData(45, 32);

        imageData.data.set(new Uint8ClampedArray(evt.target.result));
        ctx.putImageData(imageData, 0, 0);

        console.log("done loading");

    };

    fileReader.readAsArrayBuffer(blob);

};

document.body.appendChild(canvas); 
xhr.send();

PS：我正在使用canvas来复制可能正在做的糟糕解析，因为我错过了一些东西。

将图像检索为arraybuffer并将其设置在canvas imageData中

0 个答案: