使用putImageData從畫布上的像素數組中繪制圖像

Question

我正在開發一個可以加密圖像並在畫布上重繪解密圖像的項目。 由於我還不熟悉編碼和編程，我目前正在重新繪制解密圖像數據的問題，這是一個R，G，B，A形式的像素陣列。 我認為只需將數據放入即可

ctx.putImageData(imgd,0,0);

但是firebug告訴我，該值沒有實現imagedata的接口。 我在這里發布了整個陣列。 圖像寬160像素，高120像素。

有沒有辦法重新格式化數組，以便它可以在畫布上繪制？

Answer 1

假設imgd只是一個包含所有字節值的數組，您仍然需要將數組轉換為ImageData。

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你可以更快：

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

除非您需要先修改值，否則無需逐字節進行操作。