在 javascript 和 Html5 中从数组创建图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22823752/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating image from Array in javascript and Html5
提问by user3470518
Here is my code. I created imageData 2D array in javascript. After I put all pixels into the this array, I want to create image and put these values into the image.
这是我的代码。我在 javascript 中创建了 imageData 2D 数组。将所有像素放入此数组后，我想创建图像并将这些值放入图像中。
var imageData = new Array(width);
var image = new Image;
for (var i = 0; i < width; i++) {
imageData[i] = new Array(height);
}
image.src = imageData; //Here is the problem. I want to do that.
回答by
To create an image from array you can do this:
要从数组创建图像，您可以执行以下操作：
var width = 400,
height = 400,
buffer = new Uint8ClampedArray(width * height * 4); // have enough bytes
The * 4at the end represent RGBA which we need to be compatible with canvas.
将* 4在年底代表RGBA我们必须用帆布兼容。
Fill the buffer with some data, for example:
用一些数据填充缓冲区，例如：
for(var y = 0; y < height; y++) {
for(var x = 0; x < width; x++) {
var pos = (y * width + x) * 4; // position in buffer based on x and y
buffer[pos ] = ...; // some R value [0, 255]
buffer[pos+1] = ...; // some G value
buffer[pos+2] = ...; // some B value
buffer[pos+3] = 255; // set alpha channel
}
}
When filled use the buffer as source for canvas:
填充后使用缓冲区作为画布的来源：
// create off-screen canvas element
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
// create imageData object
var idata = ctx.createImageData(width, height);
// set our buffer as source
idata.data.set(buffer);
// update canvas with new data
ctx.putImageData(idata, 0, 0);
Note that you could use the imageData buffer (here: idata.data) instead of creating your own. Creating your own is really only useful if you use for example floating point values or get the buffer from some other source - setting the buffer as above will take care of clipping and rounding the values for you though.
请注意，您可以使用 imageData 缓冲区（此处：idata.data）而不是创建自己的缓冲区。如果您使用例如浮点值或从其他来源获取缓冲区，那么创建自己的对象真的很有用 - 如上所述设置缓冲区将为您处理裁剪和舍入值。
Now the data in your custom array is copied to the canvas buffer. Next step is to create an image file:
现在自定义数组中的数据被复制到画布缓冲区。下一步是创建一个图像文件：
var dataUri = canvas.toDataURL(); // produces a PNG file
Now you can use the data-uri as source for an image:
现在您可以使用 data-uri 作为图像的来源：
image.onload = imageLoaded; // optional callback function
image.src = dataUri
回答by markE
You can't make an image.src like that.
你不能像那样制作 image.src 。
A valid dataURL is a base64 encoded string with a type prefix--not an array.
有效的 dataURL 是带有类型前缀的 base64 编码字符串，而不是数组。
The image data array associated with a canvas is an Uint8ClampedArray--not a normal javascript array.
与画布关联的图像数据数组是一个 Uint8ClampedArray——不是一个普通的 javascript 数组。
Here's one way to create a pixel array that you can manipulate:
这是创建可以操作的像素阵列的一种方法：
A Demo: http://jsfiddle.net/m1erickson/956kC/
演示：http: //jsfiddle.net/m1erickson/956kC/
// create an offscreen canvas
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
// size the canvas to your desired image
canvas.width=40;
canvas.height=30;
// get the imageData and pixel array from the canvas
var imgData=ctx.getImageData(0,0,40,30);
var data=imgData.data;
// manipulate some pixel elements
for(var i=0;i<data.length;i+=4){
data[i]=255; // set every red pixel element to 255
data[i+3]=255; // make this pixel opaque
}
// put the modified pixels back on the canvas
ctx.putImageData(imgData,0,0);
// create a new img object
var image=new Image();
// set the img.src to the canvas data url
image.src=canvas.toDataURL();
// append the new img object to the page
document.body.appendChild(image);
回答by guest
Create a canvaselement of the right size and get its 2D rendering context. You don't have to add this canvas to the document. Use the context to create an ImageDataobject. Copy the values from your array into the ImageDataobject. In your case, it might be more efficient to populate the ImageDataobject in the first place, instead of a separate array. Use the context's putImageDatato draw the pixel data. Then, depending on the specific requirements of "Creating image," you might need to serialize the canvas into a data uri, so that you can fill in an imgelement's src.
创建一个canvas大小合适的元素并获取其 2D 渲染上下文。您不必将此画布添加到文档中。使用上下文创建ImageData对象。将数组中的值复制到ImageData对象中。在您的情况下，首先填充ImageData对象而不是单独的数组可能更有效。使用上下文putImageData来绘制像素数据。然后，根据“创建图像”的具体要求，您可能需要将画布序列化为数据 uri，以便您可以填写img元素的src.
