使用 putImageData 从画布上的像素数组绘制图像答案

【问题标题】：Draw image from pixel array on canvas with putImageData使用 putImageData 从画布上的像素数组绘制图像
【发布时间】：2013-04-09 17:09:50
【问题描述】：

我正在开发一个可以加密图像并在画布上重绘解密图像的项目。由于我对编码和编程仍然很陌生，因此我目前在重绘解密的图像数据时遇到问题，这是一个 R、G、B、A 形式的像素数组。我认为这可以通过简单地将数据放入

ctx.putImageData(imgd,0,0);

但萤火虫告诉我该值没有实现图像数据的接口。我已经发布了整个数组here。图片宽 160 像素，高 120 像素。

有什么方法可以重新格式化数组，使其可以在画布上绘制？

【问题讨论】：

Bart - 这只是我分配给数组的变量

标签： javascript arrays canvas pixel putimagedata

【解决方案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);

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

【讨论】：

var palette = new ImageData(new Uint8ClampedArray(img), 160, 120)?
“调色板”.. 嗯，这听起来像别的东西。我可能会将变量称为“imageData”或更有用的东西。

【解决方案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);

【讨论】：

感谢您的快速回答！
var imgData = new ImageData(new Uint8ClampedArray(imgd), 160, 120)?
这是规范中相对较新的补充。这是一个实验性 API，IE 不支持。