在javascript和Html5中从Array创建图像

Question

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.

    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. 

Answer 1

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 * 4 at the end represent RGBA which we need to be compatible with canvas.

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.

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:

image.onload = imageLoaded;       // optional callback function
image.src = dataUri

Answer 2

You can't make an image.src like that.

A valid dataURL is a base64 encoded string with a type prefix--not an array.

The image data array associated with a canvas is an Uint8ClampedArray--not a normal javascript array.

Here's one way to create a pixel array that you can manipulate:

A Demo: 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);

Answer 3

Create a canvas element 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 ImageData object. Copy the values from your array into the ImageData object. In your case, it might be more efficient to populate the ImageData object in the first place, instead of a separate array. Use the context's putImageData to 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 img element's src .