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 по теме было особенно полезно