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

我正在尝试编写一个带有画布的图像放大镜，它工作得很好，但问题是当我将鼠标移到图像上时，画布上绘制的图像没有根据鼠标在图像上的位置正确定位

你可以看到问题所在

放大镜
帆布
{
边框：1px实心#000；
宽度：150px；
高度：150像素；
边界半径：80px；
位置：绝对位置；
}
var标志=0；
var lens=document.getElementById（“放大镜”）；
var img=document.getElementById（'image'）；
var ctx=lens.getContext（“2d”）；
函数放大（）
{
flag=1；
}
功能移动（e）
{
如果（标志==1）
{
var co_ord=getImageCoords（例如，img）；
var x=共进位['x']+img.offsetLeft；
变量y=合作项目['y']+补偿；
绘制（x，y）；
/*lens.style.top=y+“px”；
lens.style.left=x+“px”*/
}
}
函数getImageCoords（事件，img）{
var=新阵列；
跳线['x']=event.offsetX？（event.offsetX）：event.pageX-img.offsetLeft；
cords['y']=event.offsetY？（event.offsetY）：event.pageY-img.offsetTop；
返回线；
}
功能图（a、b）
{
ctx.clearRect（0,0，镜头宽度，镜头高度）；
ctx.图纸图像（img，a，b，150150,0,0300150）；
}

主要的问题是，通过将原始图像强制转换为640×400 img元素来缩放原始图像。实际图像要大一点。宽度和高度只是表示设置，因此在绘制图像时

ctx.drawImage（img，a，b，150150,0，0300150）它正在绘制原始的未调整大小的图像。这意味着您的鼠标坐标与原始图像上的位置不匹配

我可以看到两种选择：

1。通过绘制到画布调整原始大小

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

相关HTML：

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

我还做了一些其他的调整。首先，您应该直接在放大镜画布上指定宽度和高度属性。否则，如果这与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>'

请注意，当我们将原始图像绘制到画布上时，实际上根本没有对其进行任何大小调整（在所有情况下，宽度和高度均为150），相反，我们只是以更大的本机大小显示它。对于较小的图像，您可能需要根据一些模糊因素调整大小。
@vignesh\u ms-很高兴为您提供帮助
ctx.drawImage(img,a,b,150,150,0,0,300,300);

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