Introduction to HTML5 Canvas pixel processing interface

Comments: This article demonstrates canvas's common operations on image pixel data operations through simple code examples and a slightly cumbersome image demo. For more information, see the following content: this article demonstrates canvas's Common Operations in image pixel data operations through simple code examples and a slightly cumbersome image demo. As for how to use these interfaces to achieve more complex results, we will continue to explain in the subsequent sections.
1. canvas image filling; 2. Set/obtain canvas image data; 3. Create canvas image data; 4. Add a bit about imageData. data; 5. Write it at the end
I. canvas image Filling

The Code is as follows:
/**
* @ Description
* @ Param {Number} x distance from the start point of the image to the leftmost side of the canvas
* @ Param {Number} y the distance from the start point of the image to the top of the canvas
* @ Param {Number} width the width of the final image drawn on the canvas
* @ Param {Number} height the height of the final image drawn on the canvas
*/
Context. drawImage (image, x, y, width, height)

Demo_01 is as follows:
<Canvas id = "draw_image_canvas" style = "background: # ccc;"> </canvas>

The Code is as follows:
Function $ (id) {return document. getElementById (id );}
Function getImage (url, callback ){
Var img = document. createElement ('img ');
Img. onload = function (){
Callback & callback (this );
};
Img. src = url;
Document. body. appendChild (img );
}
Function drawImage (){
Var url = 'xiangjishi.png ';
Var canvas = $ ('draw _ image_canvas ');
Var context = canvas. getContext ('2d ');
GetImage (url, function (img ){
Canvas. width = img. width;
Canvas. height = img. height;
Var offsetX = 20;
Var offsetY = 20;
Var drawWidth = img. width/4;
Var drawHeight = img. height/4;
Context. drawImage (img, offsetX, offsetY, drawWidth, drawHeight );
});
}
DrawImage ();

Demo Description: xiangjishi.png. After loading, draw xiangjishi.png on the canvas from the coordinates (0 and 0) in the upper left corner of the canvas. The effect is as follows:

We can see that the meaning of the four parameters in context. drawImage (image, x, y, width, height) is not very clear. You can modify several parameters to see the effect:

The Code is as follows:
Var offsetX = 20;
Var offsetY = 20;
Var drawWidth = img. width/2;
Var drawHeight = img. height/2;
Context. drawImage (img, offsetX, offsetY, drawWidth, drawHeight );

The modified demo effect is as follows. It is difficult to understand the meaning of the four parameters according to the preceding API description.
 

The Code is as follows:
Context. drawImage (image, x, y, width, height)

2. Get/set canvas image data

The Code is as follows:
/**
* @ Description: obtains the pixel information of a specific area of the canvas.
* @ Param {Number} x the distance from the start point to the leftmost side of the canvas
* @ Param {Number} y the start distance from the top of the canvas
* @ Param {Number} The width obtained by width
* @ Param {Number} height the final height
*/
Context. getImageData (x, y, width, height)

This method returns an ImageData object, which has three attributes:
ImageData. width: number of elements in each row
ImageData. height: number of elements in each column
ImageData. data: A one-dimensional array that stores the RGBA values of each pixel obtained from the canvas. This array saves four values for each pixel-red, green, blue, and alpha transparency. Each value ranges from 0 ~ In the range of 255. Therefore, each pixel on the canvas is converted into four integers in this array. The filling sequence of the array is from left to right, from top to bottom.

The Code is as follows:
/**
* @ Description use specific imageData to set the pixel information of a specific area of the canvas.
* @ Param {Number} x set from x point of the canvas
* @ Param {Number} y: Set it from the y point of the canvas.
* @ Param {Number} The width obtained by width
* @ Param {Number} height the final height
*/
Context. putImageData (imageData, x, y)

Demo_2 is used to describe the usage of getImageData () and the meaning of each parameter.
The source code of DEMO_02 is as follows, which can be slightly modified based on demo_01:

The Code is as follows:
<Canvas id = "draw_image_canvas" style = "background: # ccc;"> </canvas>
<Canvas id = "get_image_canvas" style = "background: # ccc;"> </canvas>


The Code is as follows:
Function getAndSetImageData (){
Var url = 'xiangjishi.png ';
GetImage (url, function (img ){
$ ('Drawing _ image_canvas '). width = img. width;
$ ('Drawing _ image_canvas '). height = img. height;
Var context = $ ('draw _ image_canvas '). getContext ('2d ');
Context. drawImage (img, 0, 0, img. width, img. height );
// Obtain Pixel Information
Var offsetX = img. width/2;
Var offsetY = img. height/2;
Var getImgWidth = img. width/2;
Var getImgHeight = img. height/2;
Var imgageData = context. getImageData (offsetX, offsetY, getImgWidth, getImgHeight );
// Set the pixel information. Ignore the specific code here. You can leave the obtained pixel information intact in another canvas.
Var startX = 0;
Var startY = 0;
Var ct = $ ('get _ image_canvas '). getContext ('2d ');
$ ('Get _ image_canvas '). width = img. width;
$ ('Get _ image_canvas '). height = img. height;
Ct. putImageData (imgageData, startX, startY );
});
}

Demo_2::

 
Here, the meaning of the four parameters of the getImageData method can be basically cleared. It is not difficult to understand the putImageData parameter. After the code of demo_2 is slightly modified, you can see the effect.

The Code is as follows:
Function getAndSetImageData (){
Var url = 'xiangjishi.png ';
GetImage (url, function (img ){
$ ('Drawing _ image_canvas '). width = img. width;
$ ('Drawing _ image_canvas '). height = img. height;
Var context = $ ('draw _ image_canvas '). getContext ('2d ');
Context. drawImage (img, 0, 0, img. width, img. height );
// Obtain Pixel Information
Var offsetX = img. width/2;
Var offsetY = img. height/2;
Var getImgWidth = img. width/2;
Var getImgHeight = img. height/2;
Var imgageData = context. getImageData (offsetX, offsetY, getImgWidth, getImgHeight );
// Set the pixel information
Var startX = img. width/2; // The original value is 0.
Var startY = img. width/2; // The original value is 0.
Var ct = $ ('get _ image_canvas '). getContext ('2d ');
$ ('Get _ image_canvas '). width = img. width;
$ ('Get _ image_canvas '). height = img. height;
Ct. putImageData (imgageData, startX, startY );
});
}

Demo_3 shows the following results. However, you may have a better understanding of several parameters by yourself:

 
3. Create canvas image data

The Code is as follows:
/**
* @ Description: Creates a set of image data and binds it to a canvas object.
* @ Param {Number} width the width created
* @ Param {Number} height the height created
*/
Context. createImageData (width, height)

The interface is relatively simple. The created data can be processed in the same way as the data obtained using getImageData. Note that this set of image data does not necessarily reflect the current status of the canvas.
Iv. imageData supplement
In HTML5 advanced programming and many articles, imageData. data is considered as an array, but in fact:

The Code is as follows:
ImageData. data does not return a real array, but an array-like object. You can print out the imageData. data type.
Console. log (Object. prototype. toString. call (imgageData. data); // output: [object Uint8ClampedArray]

Then print out the specific content of imageData. data. The content is long and only the first and last sections are captured. We can see that:
ImageData. data is actually an object whose index starts from 0 until width * height * 4-1.

Why not store them directly with arrays? Because the length of an array has an upper limit, the elements that exceed limitLength are stored as key values, for example, data [limitLength + 100] is actually data ['limitlength + 100 + ''] (the specific value of limitLength cannot be remembered. If you are interested, you can check it)
As for the last byteLength, byteOffset, and buffer attributes, do not go into details. Do not describe them here to avoid misleading readers.
5. Post
The level is limited. If you have any mistakes, please note