Trying to create Zoom plugin on canvas image

Question

I am trying to create zoom plugin on canvas image[I do understand there are pre-defined plugins available, thought of doing it on my own]. On mouse over of the canvas image I am copying the particular portion of original image to another canvas placed below the original image. I tried ctxZoom.scale(2, 2);but the copied image is not getting zoomed. On moving the mouse over the real image, zoomed image should be displayed below the original image which is not happening now. Any idea where I went wrong?

JsFiddle Link

HTML

<div id="imageContainer">
    <div class="active">
        <canvas id="canvas"></canvas>
        <canvas id="canvasZoom"></canvas>
    </div>
</div>

JS

$(document).ready(function() {
    var canvasZoom = document.getElementById('canvasZoom');
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var img = new Image();

    loadImage = function(src) {

        img.crossOrigin = '';
        img.src = src;

        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.restore();
            ctx.drawImage(img, 0, 0, img.width, img.height);
        }
    }
    loadImage("http://www.foreignstudents.com/sites/default/files/webfm/car_0.jpg");

    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }
    canvas.addEventListener('mousemove', function(e) {
        $("#canvasZoom").show();
        $('#canvasZoomm').css({
            left: e.pageX - 150,
            top: e.pageY
        });
        var mousePos = getMousePos(canvas, e);
        console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y)
        //grab the context from your destination canvas
        var ctxZoom = canvasZoom.getContext('2d');
        ctxZoom.scale(2, 2);//Not Working
        ctxZoom.putImageData(ctx.getImageData(mousePos.x - 150, mousePos.y - 60, 500, 500), 0, 0);
         ctxZoom.scale(2, 2);//Not Working
        ctx.restore();

    });
    canvas.addEventListener('mouseout', function(e) {
        //$("#canvasZoom").hide('slow');
    });

});

score 1 · Answer 1 · edited May 23 '17 at 10:28

1

putImageData() will bypass any transformations applied to the canvas' context. And there is really no need to use transformations in the first place as you can simply draw the image at double size (and as well avoiding cors issues):

ctxZoom.drawImage(img, mousePos.x - 150, mousePos.y - 60, 500, 500, 
                  0, 0, img.width*2, img.height*2);

Example modification

Of course, you need to to set the source and destination rectangles as you want them, as well as checking for boundaries. You can see this answer as well as this (limit bounds) for more details.

edited May 23 '17 at 10:28

Community

1
1

answered Apr 15 '16 at 11:09

Is it possible to give base64 image data to drawImage() like ctx.drawImage(base64Data, 0, 0, width, height);. Before doing zoom, I will apply brightness,contrast etc and even will mask some portion of image. So if i use "img" for zooming then all previous modifications won't be seen in zoomed image right. – Nofi Apr 15 '16 at 11:26
1

Not for the drawImage(). You can however give a Data-URL as source for the image element itself (src). I would suggest using an off-screen canvas for doing the adjustments, then use that as a source for zooming onto the display. – Apr 15 '16 at 11:28

Trying to create Zoom plugin on canvas image

1 Answers1