使用putImageData从画布上的像素阵列绘制图像 [英] Draw image from pixel array on canvas with putImageData

问题描述

我正在研究一个可以加密图像并在画布上重新绘制解密图像的项目.由于我仍然对编码和编程还很陌生，因此我目前在重新绘制解密的图像数据时遇到问题，该图像数据是R，G，B，A形式的像素阵列.我认为只需将数据放入

I am working on a project that can encrypt an image and redraw the decrypted image on canvas. As I am still pretty new to coding and programming, I am currently having issues redrawing the decrypted image data, which is a pixel array in the form R,G,B,A. I thought this would be possible by simply putting the data into

ctx.putImageData(imgd,0,0);

但是firebug告诉我，该值未实现imagedata的接口.我已经在此处发布了整个数组.图片宽160像素，高120像素.

But firebug tells me that the value does not implement the interface for imagedata. I have posted the entire array here. The image is 160px wide and 120px high.

是否可以重新格式化数组以使其在画布上可绘制?

Is there any way to reformat the array so that it is drawable on the canvas?

推荐答案

假定imgd只是一个包含所有字节值的数组，您仍然需要将该数组转换为ImageData.

Assuming imgd is simply an Array containing all byte values, you still need to convert the array to 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);

这篇关于使用putImageData从画布上的像素阵列绘制图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！