Javascript 获取画布内图像的更新高度

所以我在画布上画了一个大图像

context.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width / 2, canvas.height / 2);

我试图使用图像的高度和宽度在画布中居中，但当我这样做时，它不起作用，因为img.naturalHeight、clientHeight和height都为我提供了超过5000像素的原始图片高度。但我需要的是图像绘制到画布上后的高度，否则，当我从左侧或顶部放置5000像素时，图像会脱离画布的视口

---

如果有人有任何见解可以分享，我将不胜感激。谢谢大家

要计算将图像绘制到画布中的目标位置，使图像居中且不调整大小，可以使用以下方法：

让x=（canvas.width-img.width）/2；
设y=（canvas.height-img.height）/2；
背景图像（img，x，y）；

如果要同时绘制调整大小和居中的图像，可以使用以下方法：

let width=100；
设高度=100；
设x=（canvas.width-width）/2；
设y=（canvas.height-height）/2；
绘图图像（img、x、y、宽度、高度）；

---

请参阅。

一旦图像被绘制到画布中，该绘图即成为画布的一部分，与之前绘制到画布上的任何其他绘图都没有区别。根据您使用

.drawImage（）

的方式，绘制的宽度和高度分别为

canvas.width/2

和

canvas.height/2

，因为这是您告诉函数的大小。