javascript - 使用 putImageData 从 Canvas 上的像素数组绘制图像

Question

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

ctx.putImageData(imgd,0,0);

但是firebug告诉我这个值没有实现imagedata的接口(interface)。我已经发布了整个数组 here .图片宽 160 像素，高 120 像素。

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

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

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