Question

我正在尝试用画布编写一个图像放大镜，它工作正常，但问题是当我鼠标悬停在图像上时，根据图像上的鼠标位置，画布上绘制的图像位置不正确。

您可以看到问题here

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Magnifier</title>

<style type="text/css">
canvas
{
    border:1px solid #000;
    width:150px;
    height:150px;
    border-radius:80px;
    position:absolute;
}
</style>
</head>
<body>
<img src="natural.jpg" height="400" id="image" width="600" onMouseMove="move(event);">
<canvas id="magnifier"></canvas>
<input type="button" name="magnify" id="magnify" value="magnify" onClick="magnify()" />
</body>
</html>
<script type="text/javascript">
var flag = 0;
var lens = document.getElementById('magnifier');
var img = document.getElementById('image');
var ctx=lens.getContext("2d");
function magnify()
{
    flag = 1;
}
function move(e)
{
    if(flag == 1)
    {
        var co_ord = getImageCoords(e,img);

        var x = co_ord['x']+img.offsetLeft;
        var y = co_ord['y']+img.offsetTop;
        draw(x,y);
        /*lens.style.top = y+"px";
        lens.style.left = x+"px";*/

    }
}
 function getImageCoords(event,img) {
        var cords = new Array;
        cords['x'] = event.offsetX?(event.offsetX):event.pageX-img.offsetLeft;
        cords['y'] = event.offsetY?(event.offsetY):event.pageY-img.offsetTop;
        return cords;
    }
    function draw(a,b)
    {
    ctx.clearRect(0,0,lens.width,lens.height);
    ctx.drawImage(img,a,b,150,150,0,0,300,150);
    }
</script>

Answer 1

主要问题是您通过将原始图像强制为640 x 400 img元素来缩放原始图像。实际图像相当大。宽度和高度只是演示设置，因此当您绘制图像ctx.drawImage(img,a,b,150,150,0,0,300,150);时，它将绘制原始的未图像化图像。这意味着您的鼠标坐标与原始图像上的位置不匹配。

我可以看到两个选项：

<强> 1。通过绘制到画布来调整原始大小

请参阅更新 here 。我之前没有使用过cssdeck，所以这里有一个 fiddle 以防万一我没有正确保存它。基本上，它将图像大小调整为画布（resizeCanvas），然后将此画布用于绘图：

相关JavaScript：

var ctxR=resizeCanvas.getContext("2d");
ctxR.drawImage(theImg,0,0,600,400);

我做了一些其他的调整。首先，您应该直接在放大镜画布上指定width和height属性。否则，如果这与css不同，那么这将导致缩放。然后你可以通过以下方式缩放尺寸：

ctx.drawImage(img,a,b,150,150,0,0,300,300);

这种方法的唯一缺点是你有一个高分辨率的图像，你正在上传，然后当你的maginify失去一些质量，这似乎很可惜。因此，更好的方法可能是加载原始图像而不添加到dom，然后适当地翻译原始图像的x，y坐标。这是第二种方法：

<强> 2。缩放x，y坐标（质量更好）

查看更新 here （小提琴 here ）。如您所见，质量要好得多。

在这里，我们加载原始图像：

var origImage = document.createElement('img');
var origImage.src = '<image source>'

然后，相应地缩放：

scaleX = origImage.width/img.width;
scaleY = origImage.height/img.height;
    ctx.clearRect(0,0,lens.width,lens.height);
    ctx.drawImage(img,a*scaleX,b*scaleY,150,150,0,0,150,150);

请注意，当我们将它绘制到画布时，我们实际上并没有对原始图像进行任何大小调整（宽度和高度在所有情况下都是150），而是我们只是以更大的原始尺寸显示它。对于较小的图像，您可能希望根据某些软糖因素调整大小。

画布drawimage在css高度和宽度的图像上无法正常工作

1 个答案: