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

Question

如何缩放 标签中包含的照片？ 特别是，我想在用户单击的位置放大照片。

缩放并不难做到：

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

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

Answer 1

[工作演示]

数据

• 调整大小：R
• 画布大小：Cw、Ch
• 调整大小的图像大小：Iw、Ih
• 调整大小的图像位置：Ix< /code>, Iy
• 在画布上的点击位置：Pcx, Pcy
• 在原始图像上的点击位置：Pox, < code>Poy
• 调整大小后的图像上的点击位置：Prx、Pry

方法

1. 画布上的点击事件位置 ->图像上的位置：Pox = Pcx - Ix，Poy = Pcy - Iy
2. 图像上的位置 ->调整大小图像上的位置：Prx = Pox * R、Pry = Poy * R
3. top = (Ch / 2) - Pry、left = (Cw / 2) - Prx
4. ctx.drawImage(img, left, top, img.width, img.height)

实现

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