js 图片的压缩

在JavaScript中，图片压缩通常是指在前端通过编程手段减小图片文件的大小，以便于上传、存储或提高页面加载速度。以下是关于图片压缩的一些基础概念、优势、类型、应用场景以及如何在前端实现图片压缩的方法。

基础概念

图片压缩可以分为有损压缩和无损压缩。有损压缩会牺牲一部分图片质量来减小文件大小，而无损压缩则不会损失图片质量。

优势

减小文件大小，加快上传和下载速度。
节省存储空间。
提高网页加载速度，改善用户体验。

类型

无损压缩：例如PNG格式，压缩后可以完全恢复原始图片。
有损压缩：例如JPEG格式，压缩后会损失一部分图片细节。

应用场景

用户头像上传前的压缩。
图片分享网站，减少服务器存储压力。
移动应用中图片资源的优化。

实现方法

在前端实现图片压缩，可以使用HTML5的FileReader和Canvas API。以下是一个简单的示例代码，展示如何使用JavaScript进行图片压缩：

function compressImage(file, maxWidth, maxHeight, quality) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(event) {
            const img = new Image();
            img.src = event.target.result;
            img.onload = function() {
                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;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, width, height);

                // 压缩图片并转换为Blob对象
                canvas.toBlob((blob) => {
                    if (blob) {
                        resolve(blob);
                    } else {
                        reject(new Error('压缩失败'));
                    }
                }, 'image/jpeg', quality);
            };
            img.onerror = function() {
                reject(new Error('图片加载失败'));
            };
        };
        reader.onerror = function() {
            reject(new 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, 800, 0.8);
        // 这里可以将compressedBlob上传到服务器
        console.log(compressedBlob);
    } catch (error) {
        console.error(error);
    }
});

在这个示例中，compressImage函数接受四个参数：要压缩的文件、最大宽度、最大高度和压缩质量。函数返回一个Promise，成功时会解析为一个Blob对象，这个对象可以用来上传到服务器。