Common HTML5 canvas pixel processing Interfaces

Summary: 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

/*** @ Description * @ Param {number} x distance from the start point of the image to the left of the canvas * @ Param {number} y 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_01As follows::

<canvas id="draw_image_canvas" style="background:#ccc;"></canvas>

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:

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.

Context. drawimage (image, X, Y, width, height)

2. Get/set canvas image data

/*** @ Description: Obtain the pixel information of a specific area of the canvas * @ Param {number} X the start point of the information to be obtained from the leftmost side of the canvas * @ Param {number} y the distance from the start to the top of the canvas * @ Param {number} width obtains the width * @ Param {number} height 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.

/*** @ Description use specific imagedata to set the pixel information of a specific area of the canvas * @ Param {number} X from the X point of the canvas * @ Param {number} y from set * @ Param {number} width to get the width * @ Param {number} height to the final height */context at the Y point of the canvas. putimagedata (imagedata, x, y)

Demo_2 is used to describe the usage of getimagedata () and the meaning of each parameter.

Demo_02The source code is as follows:

<canvas id="draw_image_canvas" style="background:#ccc;"></canvas><canvas id="get_image_canvas" style="background:#ccc;"></canvas>

Function getandsetimagedata () {var url = 'xiangjishi.png '; getimage (URL, function (IMG) {$ ('draw _ 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 the 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); // sets the pixel information. The specific code is ignored first, you can leave the obtained pixel information intact in another canvas to 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.

Function getandsetimagedata () {var url = 'xiangjishi.png '; getimage (URL, function (IMG) {$ ('draw _ 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 the 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); // sets 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

/*** @ Description: create a set of image data first, and bind it to the width created by * @ Param {number} width * @ Param {number} height */context on the canvas object. 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:

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

 

References: HTML5 Advanced Programming