Creating an Image Zoomer in HTML5 Canvas

Creating an Image Zoomer in HTML5 Canvas

12 47435
HTML5 canvas - Image zoomer

HTML5 canvas – Image zoomer. New interesting tutorial – I will show you how you can create nice and easy Image zoomer using HTML5. Main idea – to draw a picture on the canvas, add event handlers to mousemove, mousedown and mouseup (to move the enlarged area near mouse cursor while holding the mouse).

Here are our demo and downloadable package:

Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, download the source files and lets start coding !

Step 1. HTML

Here are html code of our color picker page

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 canvas - Image zoomer | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div class="container">
            <canvas id="panel" width="800" height="533"></canvas>
        </div>
        <footer>
            <h2>HTML5 canvas - Image zoomer</h2>
            <a href="https://script-tutorials.com/html5-canvas-image-zoomer/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>

Step 2. CSS

Here are used CSS styles

css/main.css

*{
    margin:0;
    padding:0;
}
body {
    background-color:#bababa;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}
footer h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    color:#000;
    margin:20px auto;
    position:relative;
    width:800px;
}
#panel {
    border:1px #000 solid;
    box-shadow:4px 6px 6px #444444;
    cursor:crosshair;
}

Step 3. JS

js/script.js

// variables
var canvas, ctx;
var image;
var iMouseX, iMouseY = 1;
var bMouseDown = false;
var iZoomRadius = 100;
var iZoomPower = 2;
// drawing functions
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() { // main drawScene function
    clear(); // clear canvas
    if (bMouseDown) { // drawing zoom area
        ctx.drawImage(image, 0 - iMouseX * (iZoomPower - 1), 0 - iMouseY * (iZoomPower - 1), ctx.canvas.width * iZoomPower, ctx.canvas.height * iZoomPower);
        ctx.globalCompositeOperation = 'destination-atop';
        var oGrd = ctx.createRadialGradient(iMouseX, iMouseY, 0, iMouseX, iMouseY, iZoomRadius);
        oGrd.addColorStop(0.8, "rgba(0, 0, 0, 1.0)");
        oGrd.addColorStop(1.0, "rgba(0, 0, 0, 0.1)");
        ctx.fillStyle = oGrd;
        ctx.beginPath();
        ctx.arc(iMouseX, iMouseY, iZoomRadius, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
    }
    // draw source image
    ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
}
$(function(){
    // loading source image
    image = new Image();
    image.onload = function () {
    }
    image.src = 'images/image.jpg';
    // creating canvas object
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');
    $('#panel').mousemove(function(e) { // mouse move handler
        var canvasOffset = $(canvas).offset();
        iMouseX = Math.floor(e.pageX - canvasOffset.left);
        iMouseY = Math.floor(e.pageY - canvasOffset.top);
    });
    $('#panel').mousedown(function(e) { // binding mousedown event
        bMouseDown = true;
    });
    $('#panel').mouseup(function(e) { // binding mouseup event
        bMouseDown = false;
    });
    setInterval(drawScene, 30); // loop drawScene
});

What I doing: When we holding the mouse button and start moving it – variable bMouseDown become three. Then, in the main draw function we just going to check this variable and, in the case of the true, we’re just going to draw a new additional area with enlarged image (in a circle). After – pay attention to using of ‘globalCompositeOperation’. Using this method existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content.

Live Demo

Conclusion

Hope that today’s lesson was interesting for you. In result we got smart and rational solution for zooming of images. Great, isn’t it? I will be glad to see your thanks and comments. Good luck!

SIMILAR ARTICLES

Understanding Closures

0 9955
Semantic HTML5

0 11925

12 COMMENTS

  1. Hi,this demo works fine in IE,Firefox,Opera but it is not working properly in chrome and safari,in both the browser circle is without zoom part of image,also i have another problem in 1*2 layout in second layout circle is not working properly…

    Waiting for your reply…

    • Hello Mahendra,
      Yes, agree, really interesting behavior for Chrome, I can recommend you to change opacity value (at line 23 of the script) from 0.1 to 0.8 as example

  2. Hello sir,

    This works fine but suppose i am displaying image with using left and top that time this functionality doesn’t work properly.

    this works fine when we display image of canvas width & height but if i want use left,top& want to use imgw,imgh to display image in canvas this doesn’t work

    can you please guide me

  3. Thanks that work fine in chrome but not working properly in safari browser……………..
    circle with image zoom factor is not shown in safari it shows whole image with scale factor

    waiting for reply….

    • Hi, they are visible, but we have to approve every comment and give answer to anybody, it takes some time, wait a bit until we answer.

  5. actually what happen is that when we move cursor the image get large and move with cursor in opposite direction
    at same time circle is apply with less zoomer

    • Hello again, yes, after final investigation I found that it doesn’t work well as expected in Safari browser (only), all because we use:
      ctx.globalCompositeOperation = ‘destination-atop’
      but it doesn’t work exactly in the same way as for FF, well, I think that in case it is better to re-develop it completely (in order to make it work for every browser)

  6. @Mahendra and @Admin : Did you guys find any solution to this or is the code re-written to work in all browsers ?
    Please let me know . I am also experiencing the same behavior as pointed out by Mahendra .

    • Hello Dev,
      It is better to use any alternative example, just because unfortunately ‘destination-atop’ for globalCompositeOperation doesn’t work in the same way as it is expected for all browsers.

Leave a Reply