How to Use the HTML5 Canvas API to control the scaling and transformation of images,

Last Update:2016-03-28 Source: Internet

Author: User

Tags image line

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

How to Use the HTML5 Canvas API to control the scaling and transformation of images,

The scale (sx, sy) parameter is used to specify two parameters: the horizontal direction and the vertical direction. For example, context. scale (2, 2) is to double the image size. In fact, it looks simple and there are still some problems in actual use. Let's look at a piece of code:

Copy the content to the clipboard using JavaScript Code

<! DOCTYPE html>
<Html lang = "zh">
<Head>
<Meta charset = "UTF-8">
<Title> scaling </title>
<Style>
Body {background: url ("./images/bg3.jpg") repeat ;}
# Canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto ;}
</Style>
</Head>
<Body>
<Div id = "canvas-warp">
<Canvas id = "canvas">
Does your browser support Canvas ?! Just change one !!
</Canvas>
</Div>
<Script>
Window. onload = function (){
Var canvas = document. getElementById ("canvas ");
Canvas. width = 800;
Canvas. height = 600;
Var context = canvas. getContext ("2d ");
Context. fillStyle = "# FFF ";
Context. fillRect (0, 0, 800,600 );
Context. strokeStyle = "red ";
Context. lineWidth = 5;
For (var I = 1; I <4; I ++ ){
Context. save ();
Context. scale (I, I );
Context. strokeRect (50, 50, 150,100 );
Context. restore ();
}
};
</Script>
</Body>
</Html>

Running result:

In fact, scaling is very simple. What is a little complicated is how to make the mouse a center to zoom in or out. If the mathematical ry is not good, the calculation formula may not be clear.

Copy the content to the clipboard using JavaScript Code

Canvas. onmousewheel = canvas. onwheel = function (event) {// chrome firefox browser compatibility
Var pos = windowToCanvas (canvas, event. clientX, event. clientY );
Event. wheelDelta = event. wheelDelta? Event. wheelDelta :( event. deltaY * (-40 ));
If (event. wheelDelta> 0 ){
ImgScale * = 2;
ImgX = imgX * 2-pos.x;
ImgY = imgY * 2-pos.y;
} Else {
ImgScale/= 2;
ImgX = imgX * 0.5 + pos. x * 0.5;
ImgY = imgY * 0.5 + pos. y * 0.5;
}
DrawImage ();
}

At this time, the basic function is implemented. loading an image is similar to loading multiple images. Maintain the position and size of each image. Let's sort out the code below.

Copy the content to the clipboard using JavaScript Code

Var canvas, context;
Var img, // image object
ImgIsLoaded, // whether the image is loaded;
ImgX = 0,
ImgY = 0,
ImgScale = 1;
(Function int (){
Canvas = document. getElementById ('canvas ');
Context = canvas. getContext ('2d ');
LoadImg ();
})();
Function loadImg (){
Img = new Image ();
Img. onload = function (){
ImgIsLoaded = true;
DrawImage ();
}
Img. src = "map.jpg ";
}
Function drawImage (){
Context. clearRect (0, 0, canvas. width, canvas. height );
Context. drawImage (img, 0, 0, img. width, img. height, imgX, imgY, img. width * imgScale, img. height * imgScale );
}
Canvas. onmousedown = function (event ){
Var pos = windowToCanvas (canvas, event. clientX, event. clientY );
Canvas. onmousemove = function (event ){
Canvas. style. cursor = "move ";
Var pos1 = windowToCanvas (canvas, event. clientX, event. clientY );
Var x = pos1.x-pos. x;
Var y = pos1.y-pos. y;
Pos = pos1;
ImgX + = x;
ImgY + = y;
DrawImage ();
}
Canvas. onmouseup = function (){
Canvas. onmousemove = null;
Canvas. onmouseup = null;
Canvas. style. cursor = "default ";
}
}
Canvas. onmousewheel = canvas. onwheel = function (event ){
Var pos = windowToCanvas (canvas, event. clientX, event. clientY );
Event. wheelDelta = event. wheelDelta? Event. wheelDelta :( event. deltaY * (-40 ));
If (event. wheelDelta> 0 ){
ImgScale * = 2;
ImgX = imgX * 2-pos.x;
ImgY = imgY * 2-pos.y;
} Else {
ImgScale/= 2;
ImgX = imgX * 0.5 + pos. x * 0.5;
ImgY = imgY * 0.5 + pos. y * 0.5;
}
DrawImage ();
}
Function windowToCanvas (canvas, x, y ){
Var bbox = canvas. getBoundingClientRect ();
Return {
X: x-bbox. left-(bbox. width-canvas. width)/2,
Y: y-bbox. top-(bbox. height-canvas. height)/2
};
}

Notes for scaling and Transformation
After reading the above example, you must be surprised at the result. First, the coordinates of the vertices in the upper left corner have changed, but the line width has also changed. Therefore, there are two problems with scaling and Transformation:

The coordinates in the upper left corner of the image are also scaled.
When scaling, the image line width also scales.
For example, for the smallest original rectangle, the coordinates in the upper left corner are (50, 50) and the line width is 5 PX. But after the enlargement is 2 times, the coordinates in the upper left corner are (100,100 ), the line width is changed to 10px. This is the side effect of scaling.

The children's shoes are definitely looking forward to my suggestions on how to solve the side effects. Unfortunately, there is no good way to solve these side effects. If you want to fix the zoom in and out of the upper left corner, you can change the coordinates in the upper left corner to (0, 0). In this way, no matter what the number is, 0 is multiplied by it or 0, so it remains unchanged. If you do not want to change the line width, do not use lines. Or encapsulate a function by yourself. Do not use scale ().

We have mentioned that translation transformation, Rotation Transformation, and scaling transformation all belong to coordinate transformation, or canvas transformation. Therefore, scaling is not about the image, but the entire coordinate system and the entire canvas! It is like scaling the unit distance of the coordinate system, so the coordinates and lines are scaled. Think about it, it seems amazing.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More