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

我正在研究一个可以加密图像并在画布上重新绘制解密图像的项目。由于我对编码和编程还很陌生，目前我正在重新绘制解密的图像数据，这是R，G，B，A形式的像素数组。我认为这将有可能通过简单的数据投入从画布上的像素数组中绘制图像putImageData

ctx.putImageData(imgd,0,0);

但萤火告诉我，该值不落实的图象 - 的接口。我发布了整个阵列here。图像宽160px，高120px。

有什么办法可以重新格式化数组，以便它可以在画布上绘制？

来源

2013-04-09 user2262765

什么是'imgd'？ – Bart 2013-04-09 17:30:17

Bart - 这只是我分配给数组的变量 – user2262765 2013-04-09 17:40:31

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

来源

2013-04-09 17:46:59 Bart

感谢您的快速回答！ – user2262765 2013-04-09 17:54:12

'var imgData = new ImageData（new Uint8ClampedArray（imgd），160，120）'？ – 2016-01-11 14:03:03

这是一个比较新的规范。这是一个实验性的API，不支持IE。 – Bart 2016-01-13 16:07:07

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

没有必要，除非你首先需要修改的值去逐字节。

来源

2014-04-01 05:15:05 Trevor

'var palette = new ImageData（new Uint8ClampedArray（img），160，120）'？ – 2016-01-11 14:00:57

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

回答

相关问题