1.思路
获取图片数据 —> 用canvans画图，压缩 —> 压缩后为base64 —> 转成文件格式 —> 上传文件
2.代码
var file = fileObj ;
var reader = new FileReader();
reader.readAsDataURL(file);
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
reader.onload=function () {
var content = this.result; //图片的src，base64格式
var img = new Image();
img.src = content;
img.onload = function (){ //图片加载完毕
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// 最大尺寸限制，可通过国设置宽高来实现图片压缩程度
var maxWidth = 800,
maxHeight = 800;
// 目标尺寸
var targetWidth = originWidth
var 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);
/*第一个参数是创建的img对象；第二个参数是左上角坐标，后面两个是画布区域宽高*/
//压缩后的图片base64 url
/*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/jpeg';
* qualityArgument表示导出的图片质量，只要导出为jpg和webp格式的时候此参数才有效果，默认值是0.92*/
var dataURL = canvas.toDataURL(file.type||"image/jpeg", 0.92);//base64 格式
// let blob = dataURItoBlob(dataURL,file.name);
let newFile = dataURItoBlob(dataURL,file.name);
let formData = new FormData();
// formData.append(option.fileName,blob);
formData.append(option.fileName,newFile,file.name);
callback(formData);
}
};
};
function dataURItoBlob(dataurl,filename){ //dataurl是base64格式
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
//发现ios11不支持new File()
// let newFile = new File([u8arr], filename, {
// type: mime || "image/jpeg"
// });
// return newFile;
return new Blob([u8arr], {type:mime || "image/jpeg"});
};
