获取 Canvas 中图像的更新高度答案

【问题标题】：Get updated height of image within Canvas获取 Canvas 中图像的更新高度
【发布时间】：2021-04-21 14:35:29
【问题描述】：

所以我在画布上绘制了一张大图像。

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

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

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

【问题讨论】：

一旦图像被绘制到画布中，该图像就成为画布的一部分，与之前绘制到画布上的任何其他内容没有区别。
根据您使用.drawImage() 的方式，绘制的宽度和高度为canvas.width / 2 和canvas.height / 2，因为这是您告诉函数将其调整为的大小。

标签： javascript html image canvas html5-canvas

【解决方案1】：

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

let x = (canvas.width - img.width) / 2;
let y = (canvas.height - img.height) / 2;
context.drawImage(img, x, y);

如果你想绘制调整大小和居中的图像，你会使用类似的东西：

let width = 100;
let height = 100;
let x = (canvas.width - width) / 2;
let y = (canvas.height - height) / 2;
context.drawImage(img, x, y, width, height);

见.drawImage()。

【讨论】：