使用javascript放大画布中的照片

我花了几天时间寻找如何解决这个问题，我决定在这里寻求帮助。 问题是，我制作了一个640x480px的画布，并预装了一个图像。 在我使用鼠标选择要放大的区域后（我使用了一个可拖动的正方形，与在windows桌面上按鼠标并选择多个图标的类型相同），我将画布更改为480x480px（因为照片的放大部分是正方形），在那张新画布上，我展示了一张新的放大照片

我的问题是：既然我做了所有这些，我就可以放大某人的脸，这样我就可以让用户在眼睛和嘴上更精确地放置点（像人脸识别软件之类的东西），我怎么才能得到这些点的真实坐标呢？关于640x480px的原始图像和原始画布

一切都在纯javascript中，没有jQuery，也没有任何js库

---

谢谢你

就像你在华氏温度和摄氏温度之间转换一样：确定一个参考点并调整你的刻度。参考点很简单：（0，0）在缩放的上下文中是原始上下文中选定区域的左上角。对于比例，将缩放的单击点从像素转换为百分比。点击（120240）就是点击（25%，50%）。然后将该百分比乘以选定区域的大小，并添加参考点偏移

// Assume the user selected in the 640x480 canvas a 223x223
// square whose upper left corner is (174, 36),
let zoomArea = {x: 174, y: 36, size: 223};

// and then clicked (120, 260) in the new 480x480 canvas.
let pointClicked = {x: 120, y: 260};

function getOriginalCoords(area, clicked) {
  const ZOOMED_SIZE = 480;

  // Get the coordinates of the clicked point in the zoomed
  // area, on a scale of 0 to 1.
  let clickedPercent = {
    x: clicked.x / ZOOMED_SIZE,
    y: clicked.y / ZOOMED_SIZE
  };

  return {
    x: clickedPercent.x * area.size + area.x,
    y: clickedPercent.y * area.size + area.y
  };
}

console.log(getOriginalCoords(zoomArea, pointClicked));

---

最后我是这样做的

// get bounding rect of canvas
var rectangle = canvas.getBoundingClientRect();

// position of the point in respect to new 480x480 canvas
var xPositionZoom = e.clientX - crosshairOffSet - rectangle.left;
var yPositionZoom = e.clientY - crosshairOffSet - rectangle.top;

// position of the point in respect to original 640x480 canvas
var xPosition = rect.startX + (rect.w * (xPositionZoom / canvas.width));
var yPosition = rect.startY + (rect.h * (yPositionZoom / canvas.height));

---

谢谢，我今天就来试试