Teach you how to use Canvas to process pictures

Canvas, translated as canvas in Chinese, has a new <canvas> element in HTML5, which can be combined with JavaScript to dynamically draw graphics in the canvas.

Today, we will not talk about graphics drawing in Canvas, but how to process pictures.

The process is probably very simple and is mainly divided into the following three steps:

Yes, as easy as packing an elephant into a refrigerator, haha.

The main Canvas APIs used in the entire process are:

1. Draw an image: drawImage()
2. Get image data: getImageData()
3. Rewrite image data: putImageData()
4. Export image: toDataURL()

As the name suggests, this method is used to draw images on the Canvas canvas. There are three specific uses:

① Position the image on the canvas: context.drawImage(img,x,y)

② Position the image on the canvas and specify the width and height of the image: context.drawImage(img,x,y,width,height)

③ Cut the image and position the cut part on the canvas: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

The above parameter values ​​are described in the following table:

This method is used to obtain image data from the Canvas canvas. The specific usage is as follows:

Get the pixel data within the specified rectangular range of the canvas: var ImageData = context.getImageData(x,y,width,height)

The above parameter values ​​are described in the following table:

This method will return an ImageData object, which has three properties: width, height and data. The data array we mainly use is this, because it saves the data of each pixel in the image. After having these data, we can process them, and finally rewrite them into the Canvas canvas, thus realizing the processing and conversion of the pictures. For the specific usage of the data array, we can see it in the following examples.

This method is very simple and is used to rewrite image data into the Canvas canvas. The specific usage is as follows:

 context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

The above parameter values ​​are described in the following table:

This method is different from the above three methods. It is a method of the Canvas object. This method returns a string containing the data URI. This string can be directly used as the image path address to fill in the src attribute of the <img> tag. Specifically, Usage is as follows:

 var dataURL = canvas.toDataURL(type, encoderOptions);

The above parameter values ​​are described in the following table:

This example will briefly introduce how to process color pictures into black and white pictures through code.

 <!--HTML--><canvas id=canvas width=600 height=600></canvas><input id=handle type=button value=process pictures/><input id=create type=button value=generate pictures /><div id=result></div>

 //JavaScriptwindow.onload = function(){ var canvas = document.getElementById(canvas), //Get the Canvas canvas object context = canvas.getContext('2d'); //Get the 2D context object, most Canvas APIs are This object method var image = new Image(); //Define an image object image.src = 'imgs/img.jpg'; image.onload = function(){ //You must pay attention here! All subsequent operations must be performed after the image is loaded successfully, otherwise the image will be processed invalid context.drawImage(image,0,0); //Start drawing the image from the upper left corner (0,0) of the Canvas canvas. The default size is Actual size of the image var handle = document.getElementById(handle); var create = document.getElementById(create); handle.onclick = function(){ // Click the image processing button to process the image var imgData = context.getImageData(0,0,canvas.width,canvas.height); //Get the image data object var data = imgData.data; //Get the image data array. Each pixel in the array is saved with 4 elements. Represents red, green, blue and transparency values ​​respectively var average = 0; for (var i = 0; i < data.length; i+=4) { average = Math.floor((data[i]+data[i+1]+data[i+2])/3); //Average the red, green, and blue values ​​to get the grayscale value data[i] = data[i+1] = data[i+2] = average; Rewrite the color value of each pixel} imgData.data = data; context.putImageData(imgData,0,0); //Rewrite the processed image data to the Canvas canvas, and the image in the canvas becomes black and white}; create.onclick = function(){ // Click the Generate Image button to export the image var imgSrc = canvas.toDataURL( ); //Get the DataURL of the image var newImg = new Image(); var result = document.getElementById(result); newImg.src = imgSrc; //Assign the image path to src result.innerHTML = ''; result.appendChild(newImg); }; };};

Maybe the code above is not very well written, and it doesn't seem that easy to understand. It's best to write it yourself, so that you can understand it more deeply.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.