如何使用drawImage在画布中平滑缩放大图像？答案

【问题标题】：How to scaling big image smoothly in canvas with drawImage?如何使用drawImage在画布中平滑缩放大图像？
【发布时间】：2012-10-09 03:14:00
【问题描述】：

当我使用drawImage缩放一个大图（比如5M）时，结果看起来很糟糕，有没有更简单的方法可以用抗锯齿来缩放图像？ MDN 提到过这个：

注意：放大时图像可能会变得模糊，如果缩小太多，图像会变得有颗粒感。如果您有一些需要保持清晰的文本，则最好不要进行缩放。

EIDT：我想将图像缩放到 90x90，我的代码是这样的：

that.avatar_height >= that.avatar_width ?
that.context.drawImage($(this)[0], 86, 2, 90, that.avatar_height*90/that.avatar_width) :
that.context.drawImage($(this)[0], 86, 2, that.avatar_width*90/that.avatar_height, 90);

头像是要缩放的图片。

【问题讨论】：

标签： html canvas

【解决方案1】：

缩放图片时先获取上传图片的长宽比。

/* Calculating aspect ratio */
var imageAspectRatio = imgWidth / imgHeight;

/* Give the needed width and height of the image*/
/*For example you need like this */
var newWidth = 1024;
var newHeight = 768;

if( imgWidth <= 1024 ) {
    var newWidth =  newHeight * imageAspectRatio;
} else if(imgHeight <= 768) {
    var newHeight = newWidth / imageAspectRatio;
} else if( imgWidth >= newWidth ) {
    var newWidth =  newHeight * imageAspectRatio;
} else if(imgHeight >= newHeight) {
    var newHeight = newWidth / imageAspectRatio;
}

如果你这样做，你就不会失去你的纵横比，所以缩放看起来不错

【讨论】：

谢谢，但是看我的编辑，我的方法和你刚才提供的一样，它不起作用:(