js 压缩base64图片 可设置缩放比例 质量(复制即用)

/**
 * 压缩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 {
            // 如果base64为空,则直接返回
            if (!base64) {
                return;
            }
            // 创建一个新的Image对象
            let newImage = new Image();
            // 设置Image对象的src为传入的base64编码
            newImage.src = base64;
            // 设置crossOrigin属性为'Anonymous',用于处理跨域图片
            newImage.setAttribute("crossOrigin", "Anonymous");

            // 定义图片的宽度、高度和缩放比例
            let imgWidth, imgHeight, proportion;

            // 当图片加载完成后执行的操作
            newImage.onload = function () {
                // 计算缩放后的宽度
                proportion = this.width * multiple;
                // 记录原始宽度和高度
                imgWidth = this.width;
                imgHeight = this.height;

                // 创建一个canvas元素
                let canvas = document.createElement("canvas");
                // 获取canvas的2D渲染上下文
                let ctx = canvas.getContext("2d");

                // 设置canvas的宽高,按照等比例缩放
                // 等比例缩小放大
                canvas.width = proportion;
                canvas.height = proportion * (imgHeight / imgWidth);

                // 清除canvas上的内容
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                // 在canvas上绘制缩放后的图片
                ctx.drawImage(this, 0, 0, canvas.width, canvas.height);

                // 将canvas转换为base64编码的图片
                let smallBase64 = canvas.toDataURL(format, quality);
                let isTimeOut = false;
                // 设置超时压缩定时器
                const timer = setTimeout(() => {
                    isTimeOut = true;
                    clearTimeout(timer);
                    resolve(smallBase64);
                }, timeout);
                // 如果设置了最小KB大小,并且压缩后的图片大小小于最小KB大小,则增加质量并重新压缩
                if (min && smallBase64.length / 1024 < min) {
                    while (smallBase64.length / 1024 < min && !isTimeOut && quality <= 1) {
                        quality += 0.01;
                        smallBase64 = canvas.toDataURL(format, quality);
                    }
                }
                // 如果设置了最大KB大小,并且压缩后的图片大小大于最大KB大小,则减小质量并重新压缩
                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);
                // 将压缩后的图片的base64编码作为Promise的解决值返回
                resolve(smallBase64);
            };
        } catch (error) {
            reject(error);
            throw new Error(error);
        }
    });
}

    let newBase64 = await compressImg(base64, 1, 1, "image/webp", 100, 120)
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值