Получить изображение как массив буферов и установить его на холсте imageData

Question

Я пытаюсь весь день получить изображение с помощью запроса xhr в качестве массива буферов. Я получаю ответ, и затем я хотел бы поместить массив буферов в canvas imagedata, который, насколько я знаю, принимает Uint8ClampedArray следующим образом:

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

Я с треском провалился, это как FileReader не может проанализировать данные при использовании FileReader.readAsArrayBuffer (). И хотя мне не нужно решение base64, оно работает нормально, если я использую FileReader.readAsDataURL ().

Кроме того, здесь есть небольшая скрипка

Это не проблема браузера, поскольку я тестировал его на Chrome и Firefox. Я особенно заинтересован в том, чтобы как-то правильно проанализировать буфер массива, потому что я использую веб-работников с переносимыми объектами и дататекстурами в three.js.

Источник для демонстрационных целей

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 для копирования плохого разбора, который, возможно, я делаю, потому что что-то упустил.