我正在做一个项目,可以加密一个图像,并在画布上重画解密后的图像。 由于我对编码和编程还很陌生,我目前遇到了重绘解密图像数据的问题,这是一个像素阵列,形式为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);
使用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);
除非您需要先修改值,否则不需要逐个字节地执行。