在 Canvas 内获取更新后的图像高度

Question

所以我在 canvas 上画了一张大图。

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

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

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

Answer 1

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

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 内获取更新后的图像高度

Get updated height of image within Canvas

html

javascript

canvas

image

html5-canvas