Step by step to teach you with Canvas

CANVAS, Chinese translation is “canvas”, and the element is added in HTML5, which can be dynamically drawn in the canvas in conjunction with JavaScript.

Today, we don’t talk about Canvas’s graphics, but how to handle the picture, don’t say more, come and see the detailed introduction.

The approximate process is very simple, mainly divided into three steps:

Canvas picture processing 一步步教你利用Canvas对图片进行处理

Just like putting elephants into the refrigerator, haha.

Main API

The main Canvas API used throughout the process is:

Draw Image:


  • GetimageData ()
  • Overrive image data: PUTIMAGEDATA ()
  • Export Image:
  • 1. DrawImage ()

As the name suggests, the method is to draw image to Canvas canvas. Among them, there are three species: 1 Locate images on the canvas:

Context.drawImage (IMG, X, Y)

2 is positioned on the canvas Image, and specify the width and height of the image: Context.drawImage (IMG, X, Y, Width, Height)

3 cutting images, and positioned on the canvas Cutting part: context.drawImage (img, sx, sy, swidth, sheight, x, y, width, height)

Table more parameter values ​​are described below:





specified to be used, canvas or video .


Optional. Cut start position of the x coordinate.


Optional. Y position of start of cutting.


Optional. It is the width of the cutout image.


Optional. Highly cutout image.


x coordinate position of the image placed on the canvas.


y coordinate position of the image placed on the canvas.


Optional. Width of the image to be used. (Extended or reduced image)


Optional. The height of the image to be used. (Stretching or narrowing image)

2. GetImageData ()

This method is used to obtain from Canvas canvas Image data, the specific usage is as follows:

Gets pixel data within the specified rectangular range:

var imagedata = context.getimageData (x, y, width, height)

The above parameter values ​​are described below:




Start the X coordinate of the left upper corner position.


starts the Y coordinate of the left upper corner position.


The width of the rectangular area to be copied.


The height of the rectangular area to be copied.

This method returns an ImageData object, which is three properties from: width, height, and data, and our most mainly used this DATA. Array because it holds data for each pixel in the image. With these data, we can handle them, and then rewrite them to CAN.In the VAS canvas, this will achieve the processing conversion to the picture. For this DATA array specific usage, we can see in the following instance.

3. PutimageData ()

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

Context.putimageData (IMGDATA, X, Y, Dirtyx, Dirtyy, DirtyWidth, DirtyHeight)

The above parameter values ​​are described below:

IMGDATA specifies the imagedata object to be placed .


ImageData objects the X coordinate in the upper left corner of the upper left corner.

ImageData object The y coordinate in the upper left corner of the upper left corner is based on pixel.


is optional. The horizontal value (x), with pixel gauge, placing the position of the image on the canvas.


is optional. Draw the width used in the canvas.

4. TodataURL ()

tag as the image path address, and the specific usage is as follows:

is optional. Image format, default is image / png.

This example will be simple to pass through codeHow to handle color pictures into black and white pictures.

DIRTYY Optional. The horizontal value (Y), places the position of the image on the canvas with pixel.
DirtyHeight Optional. Draw the height used by the image on the canvas.
This method is different from the above three methods, which is a method of Canvas objects. The method returns a string containing the DATA URI, which can be directly filling into the SRC attribute of the
var dataurl = CANVAS.TODATAURL (TYPE, ENCODEROPTIONS); The above parameter value is described below:
EncoderOptions Optional. In the case where the image format is image / jpeg or image / webp, the quality of the picture can be selected from the 0 to 1 interval. The default value 0.92 will be used if the range range is exceeded. Other parameters will be ignored.
Second, Picture Processing Example

// javascriptwindow.onload = function () {var canvas = document.getlementByid (“canvas”), // Get the Canvas canvas object context = canvas.getContext (‘2D’); / / Get 2D contextual objects, most Canvas APIs are this object method var image = new image (); // Define a picture object image.src = ‘imgs / img.jpg’; image.onload = function () {/ / I must pay attention! All of the following operations need to be executed after the picture is successfully executed, otherwise the picture will handle the invalid context.drawImage (image, 0, 0); // Start the picture from the top left corner (0) position of the Canvas can start, the size is defensed Picture actual size var handle = document.getlementByid (“Handle”); var create = document.getlementByID (“create”); handle.onclick = function () {// Click “Processing Picture” button to handle image var IMGData = Context.getimageData (0, 0, canvas.width, canvas.height); // Get image data object var data =; // Get imagesData arrays, each pixel in this array is saved, indicating red, green, blue, and transparent value var average = 0; for (var i = 0; i

, respectively ]

Maybe the above code is not very good, it looks not so good, it is best to write one by person, so it will be more profound for yourself.


© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment

The above is all of this article, I hope this paper will bring a certain help to everyone’s learning or work. If you have any questions, you can leave a message, thank you for your support of Tumi Cloud