据我所知,要在 HTML5 canvas 中调整加载图像的大小,可以这样做:
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));
关于javascript - 如何按比例调整 Canvas 中的图像大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14087483/