通常我们需要限制上传图片的大小,下面的函数可以帮助我们计算出base64图片的大小,然后根据大小按需压缩
// 获取base64图片大小,返回MB数字
function calSize(base64url: string) {
let str = base64url.replace('data:image/png;base64,', '');
const equalIndex = str.indexOf('=');
if(str.indexOf('=') > 0) {
str = str.substring(0, equalIndex);
}
const strLength = str.length;
const fileLength = strLength - (strLength / 8) * 2;
// 返回单位为MB的大小
return (fileLength / (1024 * 1024)).toFixed(2);
}
// 通过canvas压缩base64图片
function dealImage(base64: any, callback: any, w: number = 1000) {
const newImage = new Image();
const quality = 0.8; // 压缩系数0-1之间
newImage.src = base64;
newImage.setAttribute("crossOrigin", 'Anonymous'); // url为外域时需要
let imgWidth;
let imgHeight;
newImage.onload = function() {
// @ts-ignore
imgWidth = this.width;
// @ts-ignore
imgHeight = this.height;
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d") as any;
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = w * imgHeight / imgWidth;
} else {
canvas.height = w;
canvas.width = w * imgWidth / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
// @ts-ignore
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
const newBase64 = canvas.toDataURL("image/jpeg", quality);
callback(newBase64);
}
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。