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

我想在画布图像上创建缩放插件[我明白有预定义的插件可用，想做我自己的]。将鼠标悬停在画布图像上时，我将原始图像的特定部分复制到放置在原始图像下方的另一个画布上。我试过ctxZoom.scale(2, 2);但复制的图像没有变焦。在将鼠标移动到实际图像上时，缩放图像应该显示在原始图像下方，而现在不会发生这种情况。任何想法我错了？试图在画布上创建缩放插件图像

JsFiddle Link

HTML

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

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

});

来源

2016-04-15 Nofi

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)了解更多详情。

来源

2016-04-15 11:09:42 K3N

是否有可能给base64图像数据drawImage（）像ctx.drawImage（base64Data，0，0，宽度，高度）;.在进行变焦之前，我会应用亮度，对比度等，甚至会掩盖图像的某些部分。所以如果我使用“img”进行缩放，那么以前的所有修改都不会在放大的图像中看到。 – Nofi

不适用于drawImage（）。但是，您可以将数据URL作为图像元素本身的源（src）。我建议使用屏幕外的画布进行调整，然后将其用作放大显示的源。 – K3N

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

回答

相关问题