Creating Image Magnifier Using HTML5

Aditya Gaur
Jun 02, 2012
11.3k
0
2
Article

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