HTML5 Canvas pixel processing

HTML5 The usage method of the createImageData() function for Canvas pixel processing, online instance demonstration of canvas pixel processing, how to use the syntax definition and detailed information about its properties, etc.

can be accessed in HTML5the pixels of the canvas. You can use the ImageData object to do this. The ImageData object contains a pixel array. By accessing this array, you can manipulate pixels. After manipulating pixels, you need to copy them back to the canvas to display them.

Creating an ImageData object

Creating an ImageData object is using2D context feature completed createImageData(). This is an example:

var canvas        = document.getElementById("ex1");
var context = canvas.getContext("2d");
var width =　100;
var height =　100;
var imageData = context.createImageData(width,        height);

The function's width and height properties createImageData() set the width and height (in pixels) of the pixel area represented by the ImageData object created. The example above creates an ImageData object with100 x 10object with 0 pixel area.

ImageData properties

The ImageData object has three properties:

• width

• height

• data

The width and height attributes contain the width and height of the graphic data area.
The data attribute is a byte array containing pixel values.

pixel processing

　Each pixel in the data array contains4bytes value. Red, green, and blue are one value, and the alpha channel is one value. The color of the pixel is determined by mixing red, green, and blue together to form the final color. The alpha channel indicates the opacity of the pixel. Each of the red, green, blue, and alpha values can be set from 0 to255between the values.
This is an example code to set the color and Alpha value of the first pixel:

var pixelIndex = 0;
imageData.data[pixelIndex            ] =　255;　　//　red color
imageData.data[pixelIndex　+　1] =            0;　　//　green color
imageData.data[pixelIndex　+　2] =            0;　　//　blue color
imageData.data[pixelIndex　+　3] =　255;

Please use the following code to read pixel values:

var pixelIndex = 0;
var red = imageData.data[pixelIndex        ];　　//　red color
var green = imageData.data[pixelIndex　+　1];　　//　green color
var blue = imageData.data[pixelIndex　+　2];　　//　blue color
var alpha = imageData.data[pixelIndex　+　3];

To access the pixelIndex value of the next pixel, please increase its value by4Each pixel is made up of4number of array elements, as shown above).
You can calculate the index of a given pixel like this:

　var index =　4　*　(x　+　y　*　);

The x and y in the calculation are calculated as the index of the x and y coordinates of the pixel. The pixels in the data array are organized into a long sequence of pixels, starting from the pixel at the top left and moving vertically to the right. When reaching the end of a row, the pixel sequence continues from the leftmost pixel of the next row. Therefore, to calculate the index of the pixel at position x, you need to multiply the y coordinate by the number of pixels per row and then add the x value to it.
This is an explanation20 pixels wide and8Image of the pixel array of the ImageData with a height of pixels. The index of each row of pixels is listed in the right margin. As you can see, the enumeration of the index starts from 0 at the top-left corner and increases to the right. When reaching the edge of the line, the enumeration continues from the leftmost pixel of the bottom line and continues to the right.

to copy pixels to the canvas

After processing the pixels, you can use2The D context function copies it to the canvas with putImageData(). There are two versions of putImageFunction(). The first version of the putImageData() function copies all pixels to the canvas. Here is an example:

var canvasX =　25;
var canvasY =　25;
context.putImageData(imageData, canvasX, canvasY);

The canvasX and canvasY parameters are the x and y coordinates where the pixels are inserted on the canvas.
The second version of the putImageData() function can copy a pixel rectangle instead of all pixels to the canvas. Here is an example of the code:

var canvasX =　25;
var canvasY =　25;
var sx = 0;
var sy = 0;
var sWidth =　25;
var sHeight =　25;
context.putImageData(imageData, canvasX, canvasY, sx, sy, sWidth, sHeight);

The sx and sy parameters (sourceX and sourceY) are the x and y coordinates of the top-left corner of the rectangle, used to copy from the pixel array.
sWidth and sHeight parameters (sourceWidth and sourceHeight) are the width and height of the rectangle, copied from the pixel array.

Get pixels from canvas

You can also capture a pixel rectangle from the canvas to an ImageData object. This is done using the getImageData() function. Here is an example:

var x =　　25;
var y =　　25;
var width =　100;
var height =　100;
var imageData2　= context.getImageData(x, y, width, height);

The x and y parameters are the coordinates taken from the top left corner of the canvas rectangle.
The width and height parameters are the width and height of the canvas rectangle taken from the coordinates.