创建CompressPicture.ts文件
class CompressedPicture {
/**
* 压缩图片
* @param file
* @returns
*/
compressImg(file) {
let files;
let fileSize: number = Number(Number(parseInt(file["size"]) / 1024 / 1024).toFixed(2));
let read = new FileReader();
read.readAsDataURL(file);
let that = this;
return new Promise(function (resolve, reject) {
read.onload = function (e: any) {
let img = new Image();
img.src = e.target.result;
img.onload = function () {
//默认按比例压缩
let img: any = this;
let w = img.width,
h = img.height;
//生成canvas
let canvas = document.createElement("canvas");
let ctx: any = canvas.getContext("2d");
let base64;
// 创建属性节点
canvas.setAttribute("width", w);
canvas.setAttribute("height", h);
ctx.drawImage(this, 0, 0, w, h);
if (fileSize < 1) {
//如果图片小于一兆 那么不执行压缩操作
base64 = canvas.toDataURL(file["type"], 1);
} else if (fileSize > 1 && fileSize < 2) {
//如果图片大于1M并且小于2M 那么压缩0.5
base64 = canvas.toDataURL(file["type"], 0.5);
} else if (fileSize > 2 && fileSize < 5) {
//如果图片超过2m并且小于5M 那么压缩0.2
base64 = canvas.toDataURL(file["type"], 0.2);
} else {
base64 = canvas.toDataURL(file["type"], 0.1);
}
// 回调函数返回file的值(将base64编码转成file)
files = that.dataURLtoFile(base64, file.name); //如果后台接收类型为base64的话这一步可以省略
resolve(files);
};
};
});
}
/**
* 将base64编码转成file
*/
dataURLtoFile(dataUrl, fileName) {
let arr = dataUrl.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], fileName, { type: mime });
}
}
export default CompressedPicture;
import CompressPicture from "@/components/CompressPicture";
let compressPicture = new CompressPicture();
compressPicture.compressImg(files[0]).then((result: any) => {
//压缩完成之后的file
console.log(result)
});