前端js压缩图片

function compressImage(file, maxWidth, maxHeight, quality) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = URL.createObjectURL(file);
        img.onload = () => {
            const canvas = document.createElement('canvas');
            let width = img.width;
            let height = img.height;

            // 计算新的尺寸
            if (width > height) {
                if (width > maxWidth) {
                    height *= maxWidth / width;
                    width = maxWidth;
                }
            } else {
                if (height > maxHeight) {
                    width *= maxHeight / height;
                    height = maxHeight;
                }
            }

            // 设置canvas尺寸
            canvas.width = width;
            canvas.height = height;

            // 绘制图片到canvas
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);

            // 压缩图片
            canvas.toBlob((blob) => {
                if (blob) {
                    resolve(blob);
                } else {
                    reject(new Error('图片压缩失败'));
                }
            }, 'image/jpeg', quality);
        };
        img.onerror = (error) => reject(error);
    });
}

// 使用示例
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (event) => {
    const file = event.target.files[0];
    try {
        const compressedBlob = await compressImage(file, 800, 600, 0.8);
        // 处理压缩后的图片blob
        console.log(compressedBlob);
    } catch (error) {
        console.error(error);
    }
});