Get started with Canvas 2D in HTML5 4-directly operate on pixels

In the previous example, images or images are used for plotting. This is a relatively advanced API, and all operations and transformations are for the "grid coordinate system. In addition, canvas also supports direct operations on each pixel (all, or partially). Undoubtedly, these operations are for the pixels in the "pixel Coordinate System, these operations are not affected by the transformation matrix, shadow effect, global transparency setting, cropping path, and combination effect, because all these effects are for the "grid coordinate system. After the operation, put it back into the canvas to achieve some interesting results.
The following are common methods:
Imagedata = context. createImageData (sw, sh)
Returns the ImageData object of the specified dimension.
Imagedata = context. createImageData (imagedata)
Returns the ImageData object in the same dimension as the specified object.
Imagedata = context. getImageData (sx, sy, sw, sh)
Returns the ImageData object of the specified start point and dimension.
Imagedata. width
Imagedata. height
Returns the ImageData dimension value (number of pixels per row/column ).
Imagedata. data
Returns a one-dimensional array of pixels in the order of RGBA (from left to right, from top to bottom, starting from the pixel in the upper left corner, put the RGBA component of each pixel in this array in sequence, so the length of the array is 4 times the number of pixels). The elements of this array are all integers in the range of 0 ~ 255.
Context. putImageData (imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight])
Write the pixels back to the specified canvas area. If the dirty rectangle is specified, only the pixels in this range will be written back. All style operations for the "grid coordinate system" will be overwritten.
Let's look at a simple example:
Var data = c. createImageData (300,200 );
For (var x = 0; x <data. width; x ++ ){
For (var y = 0; y <data. height; y ++ ){

Var val = 0;
Var horz = (Math. floor (x/4) % 2 = 0); // loop every 4 pixels
Var vert = (Math. floor (y/4) % 2 = 0); // loop every 4 pixels
If (horz &&! Vert) | (! Horz & vert )){
Val = 255;
} Else {
Val = 0;
}

Var index = (y * data. width + x) * 4; // calculate index
Data. data [index] = val; // red
Data. data [index + 1] = val; // green
Data. data [index + 2] = val; // blue
Data. data [index + 3] = 255; // force alpha to 100%
}
}
// Set the data back
C. putImageData (data, 0, 0 );

This is quite simple, that is, to set the corresponding value for the color component of each pixel.
In addition, operations on pixels can also directly modify the image effect. This principle is also very simple, that is, to obtain the pixels of the image area in the canvas, after editing, put it back.
An example of reverse image viewing (the effect can be seen in FireFox, but Chrome does not currently ):
Function testPixel ()
{
Var canvas = document. getElementById ('leson01 ');
Var c = canvas. getContext ('2d ');
 
Var img = new Image ();
 
Img. onload = function (){
// Draw the image to the canvas
C. drawImage (img, 0, 0 );
// Get the canvas data
Var data = c. getImageData (0, 0, canvas. width, canvas. height );
// Invert each pixel
For (n = 0; n <data. width * data. height; n ++ ){
Var index = n * 4;
Data. data [index] = 255-data.data [index];
Data. data [index + 1] = 255-data.data [index];
Data. data [index + 2] = 255-data.data [index];
// Don't touch the alpha
}

// Set the data back
C. putImageData (data, 0, 0 );
}
Img. src = "Penguins.png ";
}

 

From the autumn army