Post
Ask Question

Creating Image Magnifier Using HTML5

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) {
        // Handle error
    }
    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 the 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 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 0 20px 20px;
    }
    #canvas {
        margin-left: 20px;
        margin-right: 0;
        margin-bottom: 20px;
        border: thin solid #aaaaaa;
        cursor: crosshair;
        padding: 0;
    }
</style>
</head>

Output

Now we Select the area to magnify by mouse.

Output Image

The selected area is magnified.

Magnified Image


Similar Articles