Eu estou tentando processar uma imagem PNG que é armazenada em um javascriptUint8Array. O código que eu tentei originalmente era o seguinte:

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

No entanto, descobri que, por algum motivo, a função onload nunca estava em execução (eu tinha pontos de interrupção configurados no chrome e isso nunca acontecia). Descobri que, se eu definir o src para uma URL em vez de URI de dados, funcionou corretamente. No entanto, devido a algumas restrições, não posso referir-me diretamente ao URL da imagem, ou seja, deve ser carregado a partir doUInt8Array.

Além disso, para complicar um pouco mais, essas imagens podem ter megabytes de tamanho. Pelo que li, há problemas de compatibilidade ao tentar usar URIs de dados para imagens muito grandes. Por causa disso, estou extremamente hesitante em utilizá-los.

A questão, portanto, éComo eu renderizo essa matriz de bytes como PNG em um contexto de tela sem usar URIs de dados ou se referindo diretamente ao URL da imagem?

Eu também tentei usar algo como o seguinte para manipular os dados da imagem diretamente usando oputImageData função. Tenha em mente que eu não entendo 100% como essa função funciona

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

Ele foi retirado de um blog cuja guia eu encerrei, então peço desculpas à inspiração por não dar crédito apropriado.

Além disso, enquanto martelava lentamente essa coisa, tive um erro no ChromeSECURITY_ERR: DOM Exception 18. Acontece que, assim que uma imagem é carregada em uma tela usando drawImage, ela não pode ser recuperada sem algumas soluções adicionais. UMAPostagem no blog do Chromium sobre o tema foi especialmente útil