当前位置：首页 > article >正文

前端实现图片压缩

article 2024/12/23 9:50:38

前端实现图片压缩的主要方法有：

使用 HTML5 的 API
利用 canvas 将图片绘制到画布上，然后通过 toDataURL 方法获取压缩后的图片数据。
使用第三方库
借助 compressorjs、browser-image-compression 等开源库，快速实现高质量的图片压缩功能。

方法一：基于的图片压缩

function compressImage(file, quality = 0.8) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.src = e.target.result;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // 设置画布宽高
        canvas.width = img.width;
        canvas.height = img.height;

        // 绘制图片到画布
        ctx.drawImage(img, 0, 0, img.width, img.height);

        // 获取压缩后的图片数据
        canvas.toBlob(
          (blob) => {
            resolve(blob);
          },
          'image/jpeg', // 输出格式
          quality // 压缩质量
        );
      };
      img.onerror = reject;
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

方法二：使用 browser-image-compression

import imageCompression from 'browser-image-compression';

async function compressImage(file) {
  const options = {
    maxSizeMB: 1, // 压缩后的文件大小限制
    maxWidthOrHeight: 1920, // 最大宽高
    useWebWorker: true, // 开启 Web Worker 提升性能
  };

  try {
    const compressedFile = await imageCompression(file, options);
    return compressedFile;
  } catch (error) {
    console.error('压缩失败:', error);
  }
}