Ich versuche, ein PNG-Bild zu rendern, das in einem Javascript gespeichert istUint8Array. Der Code, den ich ursprünglich ausprobiert habe, war der folgende:

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

Allerdings stellte ich fest, dass die Onload-Funktion aus irgendeinem Grund nie ausgeführt wurde (ich hatte Haltepunkte in Chrome eingerichtet und sie schlug einfach nie ein). Ich fand, dass, wenn ich den Quellcode auf eine URL anstelle von Daten-URI einstelle, es richtig funktionierte. Aufgrund einiger Einschränkungen kann ich jedoch nicht direkt auf die URL des Bildes verweisen, d. H., Es muss von der geladen werdenUInt8Array.

Um die Sache etwas komplizierter zu machen, können diese Bilder auch eine Größe von Megabyte haben. Nach dem, was ich gelesen habe, gibt es Kompatibilitätsprobleme beim Versuch, Daten-URIs für sehr große Bilder zu verwenden. Aus diesem Grund zögere ich sehr, sie zu nutzen.

Die Frage ist alsoWie rendere ich dieses Byte-Array als PNG auf einem Zeichenbereichskontext, ohne Daten-URIs zu verwenden oder direkt auf die Bild-URL zu verweisen?

Ich habe auch Folgendes versucht, um die Bilddaten direkt mit der zu manipulierenputImageData Funktion. Denken Sie daran, dass ich nicht 100% verstehe, wie diese Funktion funktioniert

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

Es wurde aus einem Blog entfernt, dessen Tab ich inzwischen geschlossen habe, und entschuldigt sich bei der Inspiration, dass ich nicht die entsprechende Anerkennung gegeben habe.

Während ich langsam an dieser Sache herumhämmerte, stieß ich auf einen Fehler in ChromeSECURITY_ERR: DOM Exception 18. Es stellt sich heraus, dass ein Bild, sobald es mit drawImage in eine Zeichenfläche geladen wurde, nicht ohne zusätzliche Problemumgehungen abgerufen werden kann. EINChromium-Blogbeitrag zu diesem Thema war besonders nützlich