Estoy intentando renderizar una imagen PNG que está almacenada en un javascriptUint8Array. El código que probé originalmente era el siguiente:

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

Sin embargo, descubrí que, por alguna razón, la función de carga nunca se estaba ejecutando (tenía puntos de interrupción configurados en Chrome y simplemente nunca llegaba). Descubrí que si establecía el src en una URL en lugar de URI de datos, funcionaba correctamente. Sin embargo, debido a algunas restricciones, no puedo referirme directamente a la URL de la imagen, es decir, debe cargarse desde elUInt8Array.

Además, para complicar un poco más las cosas, estas imágenes pueden tener un tamaño de megabytes. Por lo que he leído, hay problemas de compatibilidad al intentar usar URI de datos para imágenes muy grandes. Debido a esto, soy extremadamente reacio a utilizarlos.

La pregunta, por lo tanto, es¿Cómo puedo representar esta matriz de bytes como un PNG en un contexto de lienzo sin usar URI de datos o hacer referencia directamente a la URL de la imagen?

También he intentado usar algo como lo siguiente para manipular los datos de la imagen directamente usando elputImageData función. Tenga en cuenta que no entiendo al 100% cómo funciona esta función

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);

Fue sacado de un blog cuya pestaña he cerrado desde entonces, así que me disculpo por la inspiración por no dar el crédito apropiado.

Además, mientras me metía lentamente en esto, me encontré con un error en Chrome.SECURITY_ERR: DOM Exception 18. Resulta que, tan pronto como se carga una imagen en un lienzo que usa drawImage, no se puede recuperar sin algunas soluciones adicionales. UNAChromium blog post sobre el tema fue especialmente útil