/**
* 压缩base64图片的函数
*
* @param {string} base64 - 图片的base64编码
* @param {number} multiple - 缩放比例
* @param {number} quality - 输出图片的质量(0.0到1.0之间)
* @param {string} format - 输出图片的格式,默认为"image/webp" 可选参数 image/png、image/jpeg、image/webp 等
* @param {number} min - 压缩后图片的最小KB
* @param {number} max - 压缩后图片的最大KB
* @timeout {number} timeout - 压缩图片最大等待时长,如果超时返回最后一次压缩数据
* @returns {Promise<string>} - 返回压缩后的图片的base64编码
*/
function compressImg(base64, multiple = 1, quality = 1, format = "image/webp", min, max, timeout = 5000) {
return new Promise((resolve, reject) => {
try {
if (!base64) {
return;
}
let newImage = new Image();
newImage.src = base64;
newImage.setAttribute("crossOrigin", "Anonymous");
let imgWidth, imgHeight, proportion;
newImage.onload = function () {
proportion = this.width * multiple;
imgWidth = this.width;
imgHeight = this.height;
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
canvas.width = proportion;
canvas.height = proportion * (imgHeight / imgWidth);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
let smallBase64 = canvas.toDataURL(format, quality);
let isTimeOut = false;
const timer = setTimeout(() => {
isTimeOut = true;
clearTimeout(timer);
resolve(smallBase64);
}, timeout);
if (min && smallBase64.length / 1024 < min) {
while (smallBase64.length / 1024 < min && !isTimeOut && quality <= 1) {
quality += 0.01;
smallBase64 = canvas.toDataURL(format, quality);
}
}
else if (max && smallBase64.length / 1024 > max) {
while (smallBase64.length / 1024 > max && !isTimeOut && quality > 0) {
quality -= 0.01;
smallBase64 = canvas.toDataURL(format, quality);
}
}
clearTimeout(timer);
resolve(smallBase64);
};
} catch (error) {
reject(error);
throw new Error(error);
}
});
}
let newBase64 = await compressImg(base64, 1, 1, "image/webp", 100, 120)