jquery - 尝试在 Canvas 图像上创建缩放插件

Question

我正在尝试在 Canvas 图像上创建缩放插件[我知道有可用的预定义插件，我想自己做]。将鼠标悬停在 Canvas 图像上时，我将原始图像的特定部分复制到放置在原始图像下方的另一个 Canvas 上。我尝试了 ctxZoom.scale(2, 2);，但复制的图像没有缩放。将鼠标移到真实图像上时，缩放后的图像应显示在原始图像下方，但现在不会发生这种情况。知道我哪里出错了吗？

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');
    });

});

Answer 1

putImageData() 将绕过应用于 Canvas 上下文的任何转换。而且一开始确实不需要使用转换，因为您可以简单地以双倍大小绘制图像(同时避免 cors 问题):

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

Example modification

当然，您需要根据需要设置源矩形和目标矩形，并检查边界。可以看到 this answer 以及 this (limit bounds) 了解更多详情。