共计 1925 个字符，预计需要花费 5 分钟才能阅读完成。
由于图片压缩中使用了大量异步操作，这里使用 es7 async 语法处理异步问题
基本思路是: 先将 file 数据读取为 DataUrl 类型的数据，再将 DataUrl 绘制到 canvas，通过 canvas 的 apitoDataURL 转换为 base64 数据并压缩数据，最后再将 base64 数据转换为 blob 数据类型，再上传到服务器。整个流程就完成了。下面是具体的实现方式。
1. 读取 file 转换为 DataUrl
async function fileLoad(file){
return new Promise((resolve)=>{
let ready = new FileReader();
/* 开始读取指定的 Blob 对象或 File 对象中的内容. 当读取操作完成时,
readyState 属性的值会成为 DONE, 如果设置了 onloadend 事件处理程序,
则调用之. 同时,result 属性中将包含一个 data: URL 格式的字符串以表
示所读取文件的内容.*/
ready.readAsDataURL(file);
ready.onload = function () {
resolve(this.result);
}
})
}
2. 将数据绘制到 canvas 上，压缩数据
async function canvasDataURL(path, obj) {
return new Promise((resolve)=>{
let img = new Image();
img.src = path;
img.onload = function () {
let that = this;
// 默认按比例压缩
let w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
let quality = 0.7; // 默认图片质量为 0.7
// 生成 canvas
let canvas = document.createElement(‘canvas’);
let ctx = canvas.getContext(‘2d’);
// 创建属性节点
let anw = document.createAttribute(“width”);
anw.nodeValue = w;
let anh = document.createAttribute(“height”);
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
quality = obj.quality;
}
// quality 值越小，所绘制出的图像越模糊
let base64 = canvas.toDataURL(‘image/jpeg’, quality);
// 回调函数返回 base64 的值
resolve(base64);
}
});
}
3. 将 bas64 转换为 blob
async function convertBase64UrlToBlob(urlData) {
return new Promise((resolve)=>{
let arr = urlData.split(‘,’), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n–) {
u8arr[n] = bstr.charCodeAt(n);
}
let blob = new Blob([u8arr], {type: mime});
resolve(blob);
})
}
4. 最后实现压缩方法
/**
* 三个参数
* file：一个是文件 (类型是图片格式)，
* w：配置对象
* photoCompress()
*/
async function photoCompress(file, w) {
let re = await fileLoad(file);
let base64 = await canvasDataURL(re, w);
let blob = await convertBase64UrlToBlob(base64);
return new Promise((resolve)=>{
resolve(blob);
})
}
5. 使用方法
async function upload(file) {
let form = new FormData();
let fileData = await photoCompress(file, {
quality: 0.5
});
form.append(‘pictrue’,fileData,file.name);
// 上传 form
}
