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

据我所知，以调整在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中），但我发现，也没有工作。

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

来源

2012-12-30 think123

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

For example：

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

来源

2012-12-30 01:31:37 robertc

代码取自示例，如果您要编辑代码，请提供一个新示例。 – robertc

在这个例子中，额外的300用于分离地显示两个画布（不是一个在另一个之上），并且正在做一些额外的事情，而不仅仅是按比例调整图像画布的大小。如果该示例的链接不再有效，则此处提供的代码可能会造成混淆。无论如何感谢您的答案。 – bleuscyther

我对这个话题去年去年写了一篇博客文章。你可以阅读它here。基本上它提供了一个用适当的高宽比缩放图像的功能。它包括支持风景和肖像的方向和两者之间的大小。您甚至可以选择“信箱”和“平移和扫描（缩放）”模式。

它是用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并用“0” result.targettop如果你不想为中心的形象。

来源

2012-12-30 01:47:13 selbie

感谢您更新代码。你错过了一个地方（代码下方） –

@Dogog - yep。再次修复 – selbie

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

回答

相关问题