試圖在畫布上創建縮放插件圖像

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)瞭解更多詳情。