upImgCompression(event){ // event:必传change的event
// 压缩图片需要的一些元素和对象
var imgArr = [];
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// 选择的文件对象
var file = event.target.files;
for(let i = 0;i<file.length;i++){
var reader = new FileReader(),
imgFile = file[i];
// 选择的文件是图片
if(imgFile.type.indexOf("image") == 0) {
reader.readAsDataURL(imgFile);
}else{
continue;
}
let img = new Image();
// 文件base64化,以便获知图片原始尺寸
reader.onload = function(e) {
img.src = e.target.result;
};
var imgP = new Promise(function (resolve,reject) {
// base64地址图片加载完毕后
img.onload = function() {
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// 最大尺寸限制
var maxWidth = 400,
maxHeight = 400;
// 目标尺寸
var targetWidth = originWidth,
targetHeight = originHeight;
// 图片尺寸超过400x400的限制
if(originWidth > maxWidth || originHeight > maxHeight) {
if(originWidth / originHeight > maxWidth / maxHeight) {
// 更宽,按照宽度限定尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
// canvas对图片进行缩放
canvas.width = targetWidth;
canvas.height = targetHeight;
// 清除画布
context.clearRect(0, 0, targetWidth, targetHeight);
// 图片压缩
context.drawImage(img, 0, 0, targetWidth, targetHeight);
var base64 = canvas.toDataURL("image/png",0.8);
resolve(base64);
};
});
imgArr.push(imgP);
}
return Promise.all(imgArr);
}
<input type="file" multiple accept="image/*" οnchange="handleImgUpload"/>
// 使用方法
upImgCompression(event).then(res=>{
// 结果
console.log(res);
})
经常遇到多图片上传,然后转成base64。在不压缩的情况下会特别的大。因为经常用我就简单的封装下,图片压缩成功以后会转成base64并放到数组里面返回。
因为是用es6写的需要babel转成es5浏览器才能支持。