图片压缩
原理:使用canvas对象的drawImage()方法将Image对象压缩绘制到画板上。代码实现如下
//图片压缩
compress(
base64, // 源图片
rate = 1.5, // 缩放比例
callback // 回调方法
) {
//处理缩放,转格式
var _img = new Image();
_img.src = base64;
_img.onload = function () {
var _canvas = document.createElement("canvas");
var w = this.width;
var h = this.height;
//设置条件
if (w > 500 || h > 600) {
w = this.width / rate;
h = this.height / rate;
}
_canvas.setAttribute("width", w);
_canvas.setAttribute("height", h);
_canvas.getContext("2d").drawImage(this, 0, 0, w, h);
var base64 = _canvas.toDataURL("image/jpeg");
_canvas.toBlob(function (blob) {
if (blob.size > 500 * 600) {
//如果还大,继续压缩
this.compress(base64, rate, callback);
} else {
callback(base64);
}
}, "image/jpeg");
};
},
工具库
compression.js:https://github.com/expressjs/compression
image-compressor:https://github.com/xkeshi/image-compressor
localResizeIMG:https://github.com/think2011/localResizeIMG