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

Question

AFAIK,在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中一样),但我发现它也没有用.

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

Answer 1

获取img.width和img.height,然后根据东西宽约你上浆计算比例高度.

例如:

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

Answer 2

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

它是以div定位编写的,但可以很容易地被理解为画布.

页面底部附近是"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.targettop替换为"0".