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!
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
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
Hello,
It works good with Chrome v34, try to update your version
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….
Hello Mahendra,
But did you try to play with opacity as I suggested in my previous answer?
comments are not visible on site
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.
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)
@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.