Usiłuję renderować obraz PNG, który jest przechowywany w javascriptUint8Array. Kod, który pierwotnie wypróbowałem, był następujący:

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

Jednak odkryłem, że z jakiegoś powodu funkcja onload nigdy nie działała (miałem ustawione punkty przerwania w chrome i po prostu nigdy nie trafiały). Odkryłem, że jeśli ustawię src na URL zamiast na URI danych, działa poprawnie. Jednak z powodu pewnych ograniczeń nie mogę bezpośrednio odwołać się do adresu URL obrazu, tzn. Musi on zostać załadowany zUInt8Array.

Aby jeszcze bardziej skomplikować sytuację, obrazy te mogą mieć rozmiar megabajtów. Z tego, co przeczytałem, są problemy ze zgodnością przy próbie użycia identyfikatorów URI danych dla bardzo dużych obrazów. Z tego powodu bardzo się waham przed ich wykorzystaniem.

Pytanie brzmi zatemw jaki sposób renderować tablicę bajtów jako PNG na kontekst płótna bez używania identyfikatorów URI danych lub odnoszących się bezpośrednio do adresu URL obrazu?

Próbowałem również użyć czegoś takiego jak poniżej, aby manipulować danymi obrazu bezpośrednio za pomocąputImageData funkcjonować. Pamiętaj, że nie rozumiem w 100%, jak działa ta funkcja

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

Został zniesiony z bloga, którego zakładka została zamknięta, więc przepraszam za inspirację do nieudzielania odpowiedniego kredytu.

Poza tym, podczas powolnego uderzania w tę rzecz, natrafiłem na błąd w ChromeSECURITY_ERR: DOM Exception 18. Okazuje się, że jak tylko obraz zostanie załadowany na płótnie za pomocą drawImage, nie można go pobrać bez dodatkowych obejść. ZAPost na blogu Chromium na ten temat był szczególnie przydatny