单击调整画布图像的大小，并使用javascript将其居中

如何缩放标签中包含的照片？ 特别是我想放大用户点击点的照片

缩放并不困难：

img.width = img.width + 100;
img.height = img.height + 100;
ctx.drawImage(img,0,0,img.width,img.height);

问题是，我还想将缩放后的图像放在点击点的中心，就像普通的放大镜一样。

[] 数据

• 按以下方式调整大小：

  R

• 画布大小：

  Cw

  ，

  Ch

• 调整图像大小：

  Iw

  ，

  Ih

• 调整大小的图像位置：

  Ix

  ，

  Iy

• 单击画布上的位置：

  Pcx

  ，

  Pcy

• 单击原始图像上的位置：

  Pox

  ，

  Poy

• 单击调整大小图像上的位置：

  Prx

  ，

  Pry

方法

单击画布上的事件位置->图像上的位置：

Pox=Pcx-Ix

，

Poy=Pcy-Iy

图像上的位置->调整大小图像上的位置：

Prx=Pox*R

，

Pry=Poy*R

顶部=（Ch/2）-撬动

，

左侧=（Cw/2）-撬动

ctx.drawImage（图像，左侧，顶部，图像宽度，图像高度）

实施

// resize image
I.w *= R;
I.h *= R;

// canvas pos -> image pos
Po.x = Pc.x - I.left;
Po.y = Pc.y - I.top;

// old img pos -> resized img pos
Pr.x = Po.x * R;
Pr.y = Po.y * R;

// center the point
I.left = (C.w / 2) - Pr.x;
I.top  = (C.h / 2) - Pr.y;

// draw image
ctx.drawImage(img, I.left, I.top, I.w, I.h);