Reader Level:
ARTICLE

Creating Image Magnifier Using HTML5

Posted by Aditya Gaur Articles | HTML 5 June 02, 2012
In this article we learn how to use a canvas of HTML5 to create an Image Magnifier.
  • 2
  • 0
  • 5202

Introduction

In this article we use a canvas of HTML5 to create an Image Magnifier. The mouse is used to select an area to magnify. First we define the body by using a canvas element of HTML5 then add any image which we want to magnify then create JavaScript to add magnifying functionality then apply CSS to add style.

Step 1  First we create a canvas element in the body and define its id, width and height and two div maindiv and controls. In the controls div we add button to Reset Picture. We also define the name of our JavaScript file in the body, like this:

<
body>
<
div id='maindiv'></div>
<
canvas id='canvas' width='1500' height='820'>
        Sorry, Canvas is not supported in this Browser..
</
canvas>
<
div id='controls'>
<
input type='button' id='Clear' value='Reset Picture'/>
</
div>
<
script src='ScriptFile.js'></script>
</
body>

Step 2 Now we define JavaScript for our HTML page. We use a getElementById method to get the id's of the canvas, maindiv and Clear. The Canvas.getContext('2d') method is used to return an object that provides methods and properties for drawing and image manipulations on the canvas element.

In the maindivstart function we use a and b to define the coordinates of the mouse cursor and set dragging to true and use the mouse position to create an area to magnify, like this:

var
canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    maindiv = document.getElementById('maindiv'),
    Clear = document.getElementById('Clear'),
    image = new Image(),
    cursor = {},
    divr = {},
    dragging = false;
function
maindivstart(a, b) {
    cursor.a = a;
    cursor.b = b;
    divr.left = cursor.a;
    divr.top = cursor.b;
    maindivposition();
    maindivvisible();
    dragging = true;
}
function
maindivsize(a, b) {
    divr.left = a < cursor.a ? a : cursor.a;
    divr.top = b < cursor.b ? b : cursor.b;
    divr.width = Math.abs(a - cursor.a),
   divr.height = Math.abs(b - cursor.b);
    maindivposition();
    maindivresize();
}
function
maindivend() {
    var bbox = canvas.getBoundingClientRect();
    try {
        context.drawImage(canvas,divr.left - bbox.left,divr.top - bbox.top,divr.width,divr.height,0, 0, canvas.width, canvas.height);
    }
    catch (e) {
    }
    cleardivr();
    maindiv.style.width = 0;
    maindiv.style.height = 0;
    maindivinvisible();
    dragging = false;
}
function
maindivposition() {
    maindiv.style.top = divr.top + 'px';
    maindiv.style.left = divr.left + 'px';
}
function
maindivresize() {
    maindiv.style.width = divr.width + 'px';
    maindiv.style.height = divr.height + 'px';
}
function
maindivvisible() {
    maindiv.style.display = 'inline';
}
function
maindivinvisible() {
    maindiv.style.display = 'none';
}
function
cleardivr() {
    divr = { top: 0, left: 0, width: 0, height: 0 };
}

Step 3 Now we define event handlers in our JavaScript by using mouse positions and define a reset image on button click then at end we initialize the picture, like this:

canvas.onmousedown = function (e) {
    var a = e.clientX,
       b = e.clientY;
    e.preventDefault();
    maindivstart(a, b);
};
window.onmousemove = function (e) {
    var a = e.clientX,
       b = e.clientY;
    e.preventDefault();
    if (dragging) {
        maindivsize(a, b);
    }
};
window.onmouseup = function (e) {
    e.preventDefault();
    maindivend();
};
image.onload = function () {
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
};
Clear.onclick = function (e) {
    context.clearRect(0, 0, context.canvas.width,context.canvas.height);
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
};
image.src = 'forest.jpg';

Step 4: We use CSS in the Head section for describing the the look and formatting to our HTML page, like this:

</head>
<
style>
body

{
     background: Green;
}
#maindiv

{
    position: absolute;
    border: 3px solid Black;
    cursor: crosshair;
    display: none;
}
#controls

{
    margin: 20px 0px 20px 20px;
}
#canvas

{
      margin-left: 20px;
      margin-right: 0;
      margin-bottom: 20px;
      border: thin solid #aaaaaa;
      cursor: crosshair;
      padding: 0;
}
</
style>
</head>

Output

 img_magnifier1.jpg

Now we Select the area to magnify by mouse.

img_magnifier2.jpg

The selected the area is magnified.

 img_magnifier3.jpg

COMMENT USING

Trending up