javascript - 调整图像大小并保持叠加位置

Question

我正在调整 Javascript 中的图像大小，以使图像以其正确的纵横比填充父容器。在该图像之上，我有需要以特定坐标覆盖在图像上的项目。

• 原图尺寸为：654px X 418px
• 在该图像的顶部，我在精确坐标处覆盖​​了一些其他画布项目，56px X 82px
• 我调整图像大小，保持正确的纵横比为 1.56

---

• 图像容器也可以缩放：1672px X 829px
• 具有正确纵横比的新图像尺寸：1297px X 829px
• 我如何计算新的画布覆盖坐标在哪里？

标签： javascript

Answer 1

您可以使用图像元素的属性来确定要应用于覆盖项的缩放因子。

图像的内在（未缩放）尺寸是：

const unscaledWidth = img.naturalWidth,
  unscaledHeight = img.naturalHeight;

绘制的图像尺寸为：

const scaledWidth = img.offsetWidth,
  scaledHeight = img.offsetHeight;

因此，比例因子为：

const scaleX = scaledWidth / unscaledWidth,
  scaleY = scaledHeight / unscaledHeight;

参考：

• HTMLImageElement.naturalWidth
• HTMLImageElement.naturalHeight
• HTMLElement.offsetWidth
• HTMLElement.offsetHeight