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

Draw image from pixel array on canvas with putImageData

本文关键字：像素数 像素 数组 绘制 图像 putImageData 使用      更新时间：2023-09-26

我正在研究一个可以加密图像并在画布上重新绘制解密图像的项目。由于我对编码和编程仍然很陌生，我目前有重新绘制解密图像数据的问题，这是R,G,B, a形式的像素数组。我认为只要将数据放入

就可以实现这一点。
ctx.putImageData(imgd,0,0);

但是firebug告诉我这个值没有实现imagedata的接口。我在这里张贴了整个数组。图片尺寸:160px宽，120px高

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

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

不需要一个字节一个字节，除非你需要先修改值

假设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);
相关文章：