キャンバスイメージにズームプラグインを作成しようとしています

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)です。