image大图缩小转成canvas后锯齿的问题

最近在项目中做到头像本地处理的时候发现一个问题，就是上传的头像源图如果比较大，会导致生成后的头像锯齿比较明显。

为了解决这个问题，网上搜了好多资料，很多都是说不断的缩小图片然后再放大图片，再渲染到canvas，这个方案试过了，但是无论从效率还是效果上都不太尽人意。

后来不小心在github上发现了一个小插件，还真好用，完美的把问题解决了。

这里要感谢一下插件作者，再帮他宣传一下。

插件地址：https://github.com/sapics/scale.js

 

头像上传处理思路是这样的：

1）<input type'File">接收图片上传

2）把源图片裁剪成目标宽高比例（这里不缩放，一缩放就会有锯齿了）

3）用scale.js插件把裁剪后的图像缩小到目标头像大小

4）canvas.toDataURL()获取目标图像urlBase64，完成

 

附上代码片断

 

    var imgLogo = new Image();
		imgLogo.src = _this._config.logo;
		imgLogo.onload = function() {
			_this._ctx.drawImage(imgLogo, 0, 0, _this._config.logoWidth, _this._config.signHeight);

			var imgAvatar = new Image();
		    i