Croppie.js圆形裁剪后，如何用JS/JQuery递归压缩图片避免黑背景

问题核心很明确：JPEG格式不支持透明通道，所以裁剪后的透明区域会被自动填充为黑色；而PNG虽支持透明，但默认导出的文件体积偏大，且canvas.toDataURL()的质量参数对PNG无效。要实现带透明背景的递归压缩，最优方案是使用WebP格式——它同时支持透明通道和质量可控的压缩，且压缩效率远高于PNG，绝大多数现代浏览器都已支持。

具体修改方案 #

修改你的compressFile函数，优先使用WebP格式处理，同时兼容不支持WebP的浏览器（降级为PNG并通过缩小尺寸压缩）：

function compressFile(source, maxsize, quality, callback) {
    const image = document.createElement('img');
    image.onload = () => {
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        // 初始化画布为原图尺寸
        canvas.width = image.width;
        canvas.height = image.height;
        // 清除画布确保透明背景
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(image, 0, 0);

        // 检测浏览器是否支持WebP格式
        const supportWebP = document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0;
        const mimeType = supportWebP ? 'image/webp' : 'image/png';
        
        let resp;
        if (mimeType === 'image/webp') {
            // WebP支持质量参数，直接按当前质量导出
            resp = canvas.toDataURL(mimeType, quality / 100);
        } else {
            // 不支持WebP时用PNG导出
            resp = canvas.toDataURL(mimeType);
        }

        // 计算当前文件大小
        let base64str = resp.substring(resp.indexOf(',') + 1);
        let sizeBytes = Math.ceil((base64str.length * 3 / 4) - 2);

        if (sizeBytes > maxsize) {
            if (quality > 10 && mimeType === 'image/webp') {
                // WebP格式下继续降低质量递归压缩
                compressFile(source, maxsize, quality - 10, callback);
            } else if (canvas.width > 100) {
                // PNG格式下通过缩小画布尺寸压缩（每次缩小20%）
                const scaledImage = document.createElement('img');
                scaledImage.src = resp;
                scaledImage.onload = () => {
                    canvas.width = Math.floor(scaledImage.width * 0.8);
                    canvas.height = Math.floor(scaledImage.height * 0.8);
                    ctx = canvas.getContext('2d');
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(scaledImage, 0, 0, canvas.width, canvas.height);
                    const scaledResp = canvas.toDataURL('image/png');
                    compressFile(scaledResp, maxsize, quality, callback);
                }
            } else {
                // 已到最小尺寸/最低质量，直接返回结果
                callback(resp);
            }
        } else {
            callback(resp);
        }
    }
    image.src = source;
}

关键说明 #

1. WebP格式优势：既保留透明背景，又能通过质量参数精准控制压缩率，相同视觉质量下文件体积比PNG小50%以上。
2. 兼容性处理：通过简单检测判断浏览器是否支持WebP，不支持时自动降级为PNG，通过逐步缩小画布尺寸来降低文件体积。
3. 禁用JPEG：完全放弃JPEG格式，因为它本质上不支持透明，无论怎么处理都会出现黑背景。

内容的提问来源于stack exchange，提问作者Nissim Elbaz