如何用drawImage在画布上平滑地缩放大图像？

Question

当我使用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);

“阿凡达”是要缩放的图像。

Answer 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;
}

如果你这样做，你不能失去你的纵横比，所以缩放看起来很好