尝试在画布图像上创建缩放插件

Question

我正在尝试在画布图像上创建缩放插件[我知道有可用的预定义插件，我想自己做]。在画布图像上鼠标悬停时，我将原始图像的特定部分复制到放置在原始图像下方的另一个画布上。我试过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() 将绕过应用于画布上下文的任何转换。而且实际上没有必要首先使用转换，因为您可以简单地以双倍大小绘制图像（并且还可以避免 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) 了解更多详情。