在画布上通过putImageData方法从像素数组绘制图像

Question

我正在处理一个可以加密图像并在画布上重新绘制解密后的图像的项目。由于我对编码和编程还很陌生，目前我正在遇到重绘解密后的像素数组数据（R、G、B、A格式）的问题。我认为通过将数据放入

ctx.putImageData(imgd,0,0);

但是Firebug告诉我该值未实现ImageData接口。我在此处发布了整个数组。图像宽度为160px，高度为120px。

是否有任何方法重新格式化数组，使其可在画布上绘制？

- Elias Pedersen

---

Bart - 这只是变量 i 被分配给数组。 - Elias Pedersen

Answer 1

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

除非您需要先修改值，否则不需要逐字节进行操作。

- Trevor

---

var palette = new ImageData(new Uint8ClampedArray(img), 160, 120) - Linus Unnebäck

“调色板”…嗯，这听起来像是其他东西。我可能会把变量称为“imageData”或者其他更有帮助的名称。 - vidstige

Answer 2

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

- Bart

---

var imgData = new ImageData(new Uint8ClampedArray(imgd), 160, 120) - Linus Unnebäck

这是规范中相对较新的补充。它是一个实验性的API，在IE中不受支持。 - Bart