Canvas for picture zooming and shrinking

For HTML5 believe that everyone is not unfamiliar, very early out, but seemingly no real use. The recent project to achieve such a requirement: A picture, size is not fixed, it is required to achieve similar to the map as zoom, zoom, mobile functions. It's a good place to use the canvas canvas of HTML5.
The implementation steps are as follows:
1. Define a canvas label.

<canvas id= "Bargraphcanvas" width= "height=" ></canvas>

Here is a very important place, is this width and height must write, otherwise cannot be achieved. At the same time, the width of the canvas can only be written in this way, CSS settings are problematic. Everyone can try.

2. Initialize the canvas, as well as other required objects.

var canvas, Context;var img,//Picture Object    imgisloaded,//Whether the picture is finished loading;    IMGX = 0,    imgy = 0,    imgscale = 1; (function int () {    canvas = document.getElementById (' Bargraphcanvas ');//Canvas Object    context = Canvas.getcontext (' 2d ');//canvas display two-dimensional picture    loadimg ();}) ();

　　

3. Define an Image object and set its onload event and SRC attribute.

function loadimg () {    img = new Image ();    Img.onload = function () {        imgisloaded = true;        DrawImage ();    }    IMG.SRC = '. /.. /content/images/mayday.jpg ';}

　　

4. Call the canvas's draw method.

function DrawImage () {    context.clearrect (0, 0, canvas.width, canvas.height);     Context.drawimage (            img,//Specifies the image, canvas, or video to use.            0, 0,//start cutting the x-coordinate position.            img.width, Img.height,  //height of the clipped image.            IMGX, imgy,//places the x and y coordinates of the image on the canvas.            img.width * Imgscale, Img.height * Imgscale  //width, height of the image to be used        ;}

　　

Here to introduce the DrawImage method of the canvas, the reference w3school,drawimage is to achieve the image of the clipping function, the meaning of the parameters and whether it is required to fill in the following:
* * img Specifies the image, canvas, or video to use.
* * SX is optional. The x-coordinate position at which to start clipping.
* * SY is optional. The y-coordinate position at which to start clipping.
* * Swidth Optional. The width of the image being clipped.
* * Sheight Optional. The height of the image being clipped.
* * The x-coordinate position of the image placed on the canvas.
* * y places the y-coordinate position of the image on the canvas.
* * width is optional. The width of the image to use. (stretching or shrinking the image)
* * height is optional. The height of the image to use. (stretching or shrinking the image)

5. Here, if the code is not a problem, the picture can be successfully displayed in the canvas. Here's how to zoom in, zoom out, pan. Initialize the canvas while initializing its events, as follows:

/* Event Registration */function Canvaseventsinit () {Canvas.onmousedown = function (event) {var pos = Windowtocanvas (event.cli  Entx, Event.clienty);            coordinate conversion, convert window coordinates to canvas coordinates canvas.onmousemove = function (evt) {//move canvas.style.cursor = ' move ';            var Posl = Windowtocanvas (Evt.clientx, Evt.clienty);            var x = posl.x-pos.x;            var y = posl.y-pos.y;            pos = POSL;            IMGX = x;            Imgy = y;  DrawImage ();        Re-draw the picture};            Canvas.onmouseup = function () {canvas.onmousemove = null;            Canvas.onmouseup = null;        Canvas.style.cursor = ' default ';    };    }; Canvas.onmousewheel = Canvas.onwheel = function (event) {//Wheel zoom reduction var pos = Windowtocanvas (Event.clientx, even        T.clienty); Event.wheeldelta = Event.wheeldelta?  Event.wheeldelta: (Event.deltaly * (-40));            Gets the current mouse scroll condition 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 (); Re-draw the picture};}  /* Coordinate conversion */function Windowtocanvas (x, y) {var box = Canvas.getboundingclientrect (); This method returns a rectangle object that contains four properties: Left, top, right, and bottom. Represents the distance between the sides of the element and the top and left of the page return {x:x-box.left-(Box.width-canvas.width)/2, Y:y-box.top-(Box.heig ht-canvas.height)/2};}

By following these steps, the image is loaded, zoomed in, zoomed out, and translated. The hard part of personal feeling is that this is written using native JavaScript, and if it's easier to use jquery, you'll have time to try again later. The current results are as follows:

Canvas for picture zooming and shrinking