Pointers 如何计算鼠标指针在画布中的位置？

我正在实现图像处理工具，我想从鼠标在画布上单击的图像中删除背景

我的画布自动设置为适合windows。若图像太大，那个么它将自动缩小以适应视口

现在，当我的画布缩小时，我的图像变得模糊。 我正在使用以下代码计算鼠标的位置：

mouse:move': (evt) => {
   var canvasOffset = $('#eraserCanvas').offset();
   var x = evt.e.pageX - canvasOffset.left;
   var y = evt.e.pageY - canvasOffset.top;
   var pixel = ctx.getImageData(x, y, 1, 1);
}

但这里的问题是，我的

上下文

与画布大小（缩小）一样小，所以我的图像的像素数据是小图像，这可能导致最终输出模糊

经过大量的搜索和思考，我发现一个解决方案是，如果我们保持上下文缩放到原始图像大小。只有画布是调整大小，然后我们的最终输出是明确的

现在的问题是，我的鼠标位置是根据我的缩放画布。所以，有必要计算鼠标在画布原始大小中的位置，以便在缩放后的画布中获得正确的像素。但我不知道如何计算指针在缩放画布中的位置，即指针在原始大小画布或上下文中的位置

请参阅下图以了解更多信息：

在这里，原始大小的画布将不会显示给用户。但去除像素的过程是在原始大小的画布上进行的

---

整个场景（上图）

向用户显示小（缩小）画布

用户从画布（图像）中拾取像素

我们首先得到鼠标指针在缩放画布（图像）上的位置

现在

如果我们将缩放后的画布缩放到原始大小，鼠标指针在原始画布中的位置会是什么

第四步是计算，我不知道怎么做

---

请帮助我。

如果您打算使用css缩放画布，我将使用此功能在画布上获取鼠标位置。首先，将比例计算为画布初始大小与缩放画布大小之间的关系。接下来，重新计算鼠标在画布上的位置

function oMousePosScaleCSS(canvas, evt) {
      let ClientRect = canvas.getBoundingClientRect(), 
          scaleX = canvas.width / ClientRect.width,
          scaleY = canvas.height / ClientRect.height; 
          return {
          x: (evt.clientX - ClientRect.left) * scaleX, 
          y: (evt.clientY - ClientRect.top) * scaleY 
      }
    }

请参见一个工作示例：

const canvas=document.getElementById（“canvas”）；
const ctx=canvas.getContext（“2d”）；
设cw=canvas.width=150；
设ch=canvas.height=150；
函数oMousePosScaleCSS（画布，evt）{
让ClientRect=canvas.getBoundingClientRect（），
scaleX=canvas.width/ClientRect.width，
scaleY=canvas.height/ClientRect.height；
返回{
x:（evt.clientX-ClientRect.left）*scaleX，
y：（evt.clientY-ClientRect.top）*scaleY
}
}
让last={}
canvas.addEventListener（“鼠标向下”（e）=>{
m=oMousePosScaleCSS（画布，e）
ctx.clearRect（0,0，cw，ch）；
last.x=m.x；
last.y=m.y；
});
canvas.addEventListener（“mouseup”，（e）=>{
最后={}
});
canvas.addEventListener（“mousemove”，（e）=>{
if（last.x）{
m=oMousePosScaleCSS（画布，e）
ctx.beginPath（）；
ctx.moveTo（last.x，last.y）；
ctx.lineTo（m.x，m.y）；
ctx.stroke（）；
last.x=m.x；
last.y=m.y；
}
})

画布{
边框：1px实心#d9d9d9；
显示：块；
位置：绝对位置；
保证金：自动；
左：0；
右：0；
排名：0；
底部：0；
/***********************/
变换：比例（.75，.75）；
/***********************/
}