Javascript 使用putImageData从画布上的像素阵列绘制图像

我正在做一个项目，可以加密图像，并在画布上重新绘制解密后的图像。由于我对编码和编程还是相当陌生，我目前在重新绘制解密的图像数据时遇到了问题，这是一个形式为R、G、B、a的像素阵列。我认为只需将数据放入

ctx.putImageData(imgd,0,0);

但是firebug告诉我该值没有实现imagedata的接口。我已经发布了整个阵列。图像宽160px，高120px

---

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

假设

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 imgd=[27,32,26,28,33,27,30,35,29,31….]
//首先，创建一个新的ImageData来包含我们的像素
var imgData=ctx.createImageData（160120）；//宽度x高度
var数据=imgData.data；
//将每个字节的img复制到我们的ImageData中
对于（变量i=0，len=160*120*4；i

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

---

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

Bart-这只是我为数组库分配的变量，用于快速回答

var-imgData=new-ImageData（new-uint8clampedaray（imgd），160，120）

？这是对规范的一个相对较新的添加。它是一个实验性的API，在IE中不受支持。

var-palete=new-ImageData（new-uint8clampedaray（img），160，120）

？“palete.”。。嗯，听起来像是别的。我可能会将变量称为“imageData”或更有用的东西。