如何按比例调整画布中的图像大小

How to proportionally resize an image in canvas?

本文关键字：图像 布中 按比例 调整      更新时间：2023-09-26

要在HTML5画布中调整加载的图像大小，可以这样做:

var img = new Image();
img.onload = function () {
  ctx.drawImage(img, 0, 0, 300, 200); // resizes image to 300px wide, 200px high
}
img.src = 'images/myimage.jpg';

但后来我意识到图像比例不正确。所以我试着只使用一个参数(就像在HTML中一样)，但我发现这也不起作用。

如何按比例调整图像大小?

获取img.width和img.height，然后根据您要调整的宽度计算比例高度

例如:

ctx.drawImage(img, 300, 0, 300, img.height * (300/img.width));

去年我写了一篇关于这个话题的博客文章。你可以在这里阅读。基本上，它提供了一个用适当的宽高比缩放图像的功能。它包括支持横向和纵向方向以及两者之间的大小。您甚至可以选择"信箱"answers"平移扫描(缩放)"模式。

写的时候考虑到了div的定位，但是对于canvas来说很容易理解。

靠近页面底部的是"ScaleImage"函数。这可能就是你想要的。然后你可以这样应用它:

var img = new Image();
img.onload = function () {
  var result = ScaleImage(img.width, img.height, 300, 200, true);
  ctx.drawImage(img, result.targetleft, result.targettop, result.width, result.height); // resizes image to a target size of 300x200 using letterbox mode
}
img.src = 'images/myimage.jpg';

可以替换result。Targetleft和result。

相关文章：