【基于画布canvas进行图片压缩 - CSDN App】http://t.csdnimg.cn/JPVM3
vantUi上传压缩案例
dataURLtoFile(dataurl, filename) {
// 将base64转换为file文件
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
},
async clzpAfterRead(file) {
// 大于2MB的图片都缩小像素上传
console.log(file.file.size, "2097152");
//2097152
if (file.file.size > 2097152) {
let canvas = document.createElement("canvas"); // 创建Canvas对象(画布)
let context = canvas.getContext("2d");
let img = new Image();
img.src = file.content; // 指定图片的DataURL(图片的base64编码数据)
img.onload = async () => {
canvas.width = 400;
canvas.height = 300;
context.drawImage(img, 0, 0, 400, 300);
file.content = canvas.toDataURL(file.file.type, 0.92); // 0.92为默认压缩质量
let files = this.dataURLtoFile(file.content, file.file.name);
console.log(files, "2097152");
await this.uploadImg(files);
};
} else {
//小于2M直接上传
await this.uploadImg(file.file);
}
},
//上传
uploadImg(file) {
const formData = new FormData();
formData.append("file", file);
formData.append("bizBelongTo", this.bizBelongTo);
apiStoreManagement
.uploadShopImage(formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((res) => {
if (res.code == "0000") {
if (file instanceof Array) {
//判断是否是数组
file.map((v, i) => {
v.status = "success";
v.message = "";
v.url = res.data[i];
v.id = null;
});
} else {
file.status = "success";
file.message = "";
file.url = res.data.imageUrl;
if (this.bizBelongTo == 1) {
this.signBoardImageList.push({
imagePath: res.data.imagePath,
fileSortNo: 1,
id: null,
});
} else {
this.fullViewImageList.push({
imagePath: res.data.imagePath,
fileSortNo: this.fullViewImageList.length + 1,
id: null,
});
}
}
} else {
return Promise.reject(res);
}
})
.catch((err) => {
Toast.fail(err.msg || "上传失败");
});
},