Html5 Canvas Preliminary Study Notes (12) - Image cropping and adjustment

The previous article talked about the two operations of images, reading and exporting. After reading the image, we use drawImage with only three parameters. This article will Introducing 5 parameters and #drawImage of 9 parameters respectively. In fact, The last function is very similar to drawRegion in j2me. First introduce the drawImage function with 5 parameters that can adjust the size of the image.

First look at the following effect:

##The code is as follows:

var image = new Image();
image.src = "grossini.png";
image.onload = function(){
context.drawImage(image,50,50);
context.drawImage(image,100,50,image.width * 1.5,image.height * 1.5);
context.drawImage(image,200,50,image.width * 0.5,image.height * 0.5);
context.drawImage(image,250,50,160,50);
}

In the

onload function of the image, I wrote four drawImage, of which the last three are 5 parameters, the effect is very obvious, one enlarges the picture 1.5 times, and the other reduces the picture to 0.5, there is also an unequal scaling. That is to say, the last two parameters are the width and height of the picture we want to draw. Of course, under normal circumstances, they are just proportional scaling. You can also specify other widths, such as the effect of the last sentence.

Let’s introduce the

drawImage function that can be cut. First, let’s look at the parameter introduction:

drawImage

(picture, picture The starting x coordinates of cropping, the starting y coordinates of cropping in the picture, the width of the cropping area, the height of the cropping area, the drawn Position x coordinates, drawn position y coordinates, drawn graphic width, drawn graphic height)

First look at the following effect:

The code is as follows:

var image = new Image();
image.src = "grossini.png";
image.onload = function(){
context.drawImage(image,50,50);
context.drawImage(image,0,0,image.width,image.height / 3,100,50,image.width * 1.5,image.height * 0.5);
context.drawImage(image,0,image.height / 3,image.width,image.height * 2/ 3,180,50,image.width * 1.5,image.height);

This function is better than the previous one There is an additional cropping function that allows us to crop images arbitrarily. It is often used in this way. The effect is as follows:

##Code As follows:

var test = new Image();
test.src = "test.png";
test.onload = function(){
context.drawImage(test,50,180);
context.drawImage(test,67 * 3,0,67,121,50,280,67,121);
}

This example shows that cutting simple small pictures from a list of large pictures is one of the uses of cutting.

The above is the content of Html5 Canvas Preliminary Study Notes (12) - Image Cutting and Adjustment. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!