js 上传时压缩图片大小

在JavaScript中上传图片时压缩图片大小，可以提升上传速度、节省存储空间，并减少网络带宽消耗。以下是相关基础概念及实现方法：

基础概念

图片压缩：指通过减少图片数据量来降低图片文件大小的过程，可以在保证一定画质的前提下进行。
压缩算法：用于实现图片压缩的具体算法，如JPEG压缩算法。

优势

减少上传时间。
节省服务器存储空间。
提升用户体验，加快页面加载速度。

类型

有损压缩：通过去除图片中的冗余信息来减小文件大小，会牺牲一定的图片质量。
无损压缩：在不损失图片质量的前提下减小文件大小，但通常压缩率较低。

应用场景

照片分享网站。
社交媒体平台。
在线图片库。

实现方法

可以使用JavaScript库如compressor.js来实现图片压缩。以下是一个使用compressor.js进行图片压缩的示例代码：

// 引入compressor.js库（需要先通过npm安装或CDN引入）
import Compressor from 'compressorjs';

// 假设有一个文件输入元素
const input = document.getElementById('fileInput');

input.addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (!file) return;

    // 创建一个新的Compressor实例
    new Compressor(file, {
        quality: 0.6, // 压缩质量，范围0-1，越小压缩率越高
        success(result) {
            // 压缩成功，result是一个新的Blob对象
            const compressedFile = new File([result], 'compressed.jpg', { type: 'image/jpeg' });
            // 可以将compressedFile上传到服务器
            uploadFile(compressedFile);
        },
        error(e) {
            console.error('压缩失败:', e);
        },
    });
});

// 上传文件的函数（示例）
function uploadFile(file) {
    const formData = new FormData();
    formData.append('file', file);

    fetch('/upload', { // 假设后端有一个/upload接口处理文件上传
        method: 'POST',
        body: formData,
    })
    .then(response => response.json())
    .then(data => {
        console.log('上传成功:', data);
    })
    .catch(error => {
        console.error('上传失败:', error);
    });
}