canvas drawimage在具有CSS高度和宽度的图像上无法正常工作

Question

我试图用画布写一个图像放大镜，它工作正常，但是问题是当我将鼠标悬停在图像上时，基于图像上的鼠标位置，画布上绘制的图像未正确定位。

你可以在这里看到问题

<!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.通过绘画到画布来调整原件的大小

在这里查看更新。 我以前没有使用过cssdeck，所以这里是一个小提琴 ，以防万一我没有正确保存它。 基本上，它将图像调整为画布大小（resizeCanvas），然后将此画布用于绘图：

相关HTML：

<canvas id='resizeCanvas' height='400' width='600' onMouseMove="move(event);"></canvas>

相关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);

这种方法的唯一缺点是您上传的是高分辨率图像，然后放大后失去一些质量，这似乎很可惜。 因此，更好的方法可能是在不添加dom的情况下加载原始图像，然后为原始图像适当地转换x，y坐标。 第二种方法是：

2.缩放x，y坐标（更好的质量）

请参阅更新这里（小提琴这里也一样）。 如您所见，质量要好得多。

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

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），而只是将其显示为更大的原始尺寸。 对于较小的图像，您可能需要根据一些软糖因素调整大小。

canvas drawimage在具有CSS高度和宽度的图像上无法正常工作

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-05-19 12:52:17

canvas drawimage在具有CSS高度和宽度的图像上无法正常工作

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-05-19 12:52:17

解决方案1
1 已采纳 2014-05-19 12:52:17