Javascript: рендеринг PNG, сохраненного как Uint8Array на элемент Canvas без URI данных

Я пытаюсь сделать PNG-изображение, которое хранится в JavaScriptUint8Array, Код, который я первоначально попробовал, был следующим:

var imgByteStr = String.fromCharCode.apply(null, this.imgBytes);

var pageImg = new Image();
pageImg.onload = function(e) {

    // Draw onto the canvas
    canvasContext.drawImage(pageImg, 0, 0);

};

// Attempt to generate the Data URI from the binary
// 3rd-party library adds toBase64() as a string function
pageImg.src="data:image/png;base64,"+encodeURIComponent(imgByteStr.toBase64());

Однако я обнаружил, что по какой-то причине функция onload никогда не выполнялась (у меня были настроены точки останова в chrome, и они просто никогда не срабатывали). Я обнаружил, что если я установил src на URL вместо Data URI, он работал бы правильно. Однако из-за некоторых ограничений я не могу напрямую ссылаться на URL изображения, т. Е. Он должен быть загружен изUInt8Array.

Кроме того, чтобы немного усложнить ситуацию, эти изображения могут иметь размер в мегабайтах. Из того, что я прочитал, есть проблемы совместимости при попытке использовать URI данных для очень больших изображений. Из-за этого я крайне не решаюсь их использовать.

Поэтому вопрос заключается вКак я могу отобразить этот байтовый массив как PNG на контекст холста, не используя URI данных или ссылаясь непосредственно на URL изображения?

Я также попытался использовать что-то вроде следующего, чтобы манипулировать данными изображения напрямую, используяputImageData функция. Имейте в виду, что я не на 100% понимаю, как работает эта функция

var imgdata = canvasContext.createImageData(this.baseHeight, this.baseWidth);
var imgdatalen = imgdata.data.length;
for(var i=0; i<imgdatalen; i++) {
    imgdata.data[i] = _this.imgBytes[i];
}
canvasContext.putImageData(imgdata, 0, 0);

Оно было взято из блога, чью вкладку я с тех пор закрыл, поэтому извиняюсь за то, что не дал должного уважения.

Кроме того, медленно разбираясь с этой вещью, я столкнулся с ошибкой в ChromeSECURITY_ERR: DOM Exception 18, Оказывается, что как только изображение загружается в холст с использованием drawImage, его невозможно получить без дополнительных обходных путей.Сообщение в блоге Chromium по теме было особенно полезно

Ответы на вопрос(3)

Ваш ответ на вопрос