Mit putImageData Bild von Pixel-Array auf Leinwand zeichnen

Question

Ich arbeite an einem Projekt, das ein Bild verschlüsseln und das entschlüsselte Bild auf Leinwand neu zeichnen kann. Da ich beim Codieren und Programmieren noch ziemlich neu bin, habe ich derzeit Probleme, die entschlüsselten Bilddaten neu zu zeichnen, bei denen es sich um ein Pixel-Array in der Form R, G, B, A handelt. Ich dachte, dies möglich wäre, indem man einfach die Daten in

ctx.putImageData(imgd,0,0); 

Aber Firebug sagt mir setzen, dass der Wert nicht die Schnittstelle für Bilddaten nicht implementiert. Ich habe das gesamte Array here gepostet. Das Bild ist 160 Pixel breit und 120 Pixel hoch.

Gibt es eine Möglichkeit, das Array neu zu formatieren, so dass es auf der Leinwand gezeichnet werden kann?

Answer 1

Angenommen, imgd ist einfach ein Array, das alle Bytewerte enthält, müssen Sie das Array dennoch in ImageData konvertieren.

var imgd = [27,32,26,28,33,27,30,35,29,31.....] 

// first, create a new ImageData to contain our pixels 
var imgData = ctx.createImageData(160, 120); // width x height 
var data = imgData.data; 

// copy img byte-per-byte into our ImageData 
for (var i = 0, len = 160 * 120 * 4; i < len; i++) { 
    data[i] = imgd[i]; 
} 

// now we can draw our imagedata onto the canvas 
ctx.putImageData(imgData, 0, 0); 

Answer 2

Uint8 Verwenden Sie können dies viel schneller:

var canvas = document.createElement("canvas"), 
    ctx = canvas.getContext("2d"), 
    img = [27,32,26,28, ... ]; 

// Get a pointer to the current location in the image. 
var palette = ctx.getImageData(0,0,160,120); //x,y,w,h 
// Wrap your array as a Uint8ClampedArray 
palette.data.set(new Uint8ClampedArray(img)); // assuming values 0..255, RGBA, pre-mult. 
// Repost the data. 
ctx.putImageData(palette,0,0); 

Keine Notwendigkeit Byte-für-Byte zu gehen, wenn Sie zuerst die Werte ändern müssen.