获取 Canvas 中图像的更新高度

Posted

技术标签:

【中文标题】获取 Canvas 中图像的更新高度【英文标题】:Get updated height of image within 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 / 2canvas.height / 2,因为这是您告诉函数将其调整为的大小。 【参考方案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()

【讨论】:

以上是关于获取 Canvas 中图像的更新高度的主要内容,如果未能解决你的问题,请参考以下文章

获取 ImageView 中图像的显示大小

如何编程更改使用 Interface Builder 创建的 UIImageView 中图像的高度/宽度? [复制]

如何使用 CSS 更改 <i> 标签中图像的高度和宽度?

HTML5 Canvas 中图像大小调整的界限

ios中图像的ScrollView

如何在 HTML5 Canvas 中获取绘制弧的宽度和高度?