开发日志：高效图片压缩与上传技术解析

// 图片压缩
compressImage(file, success, error) {
// 图片小于1M不压缩
// if (file.size
// return success(file);
// }
const name = file.name; //文件名
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = e => {
const src = e.target.result;
const img = new Image();
img.src = src;
img.onload = e => {
const w = img.width;
const h = img.height;
const quality = 0.8; // 默认图片质量为0.92
// 生成canvas
const canvas = document.createElement(‘canvas‘);
const ctx = canvas.getContext(‘2d‘);
// 创建属性节点
const anw = document.createAttribute("width");
anw.nodeValue = w;
const anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
// 铺底色 PNG转JPEG时透明区域会变黑色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, w, h);
ctx.drawImage(img, 0, 0, w, h);
// quality值越小，所绘制出的图像越模糊
const base64 = canvas.toDataURL(‘image/jpg‘, quality); // 图片格式jpeg或webp可以选0-1质量区间
// 返回base64转blob的值
console.log(`原图${(src.length/1024).toFixed(2)}kb`, `新图${(base64.length/1024).toFixed(2)}kb`);
// 去掉url的头，并转换为byte
const bytes = window.atob(base64.split(‘,‘)[1]);
// 处理异常,将ascii码小于0的转换为大于0
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i ) {
ia[i] = bytes.charCodeAt(i);
}
file = new Blob([ab], {type : ‘image/jpg‘});
file.name = name;
success(file);
}
img.onerror = e => {
error(e);
}
}
reader.onerror = e => {
error(e);
}
},

// file.file 原来的对象 obj 压缩好的对象
this.compressImage(file.file, obj => {
console.log(file.file)
console.log(obj)
file.status = ‘uploading‘
file.message = ‘上传中...‘;
setTimeout(() => {
let formData = new FormData()
formData.append(‘file‘, obj, obj.name)
........
},1000)
})