博客站

在 UniApp 中，图片压缩是优化应用性能的重要手段之一，特别是在上传图片或展示大量图片的场景中。通过图片压缩，可以减少图片文件的大小，提升加载速度和节省带宽。以下是 UniApp 处理图片压缩的常用方法：

一、使用 uni.compressImage API

UniApp 提供了 uni.compressImage API，用于压缩图片。

1. 基本用法

• 示例：

  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0];
      uni.compressImage({
        src: tempFilePath,
        quality: 80, // 压缩质量（0-100）
        success: (compressRes) => {
          console.log('压缩后的图片路径：', compressRes.tempFilePath);
        },
        fail: (err) => {
          console.log('图片压缩失败：', err);
        }
      });
    }
  });
  

2. 设置压缩质量

• 通过 quality 参数设置压缩质量（0-100），数值越小，压缩率越高。
• 示例：

  uni.compressImage({
    src: tempFilePath,
    quality: 50, // 压缩质量为 50
    success: (compressRes) => {
      console.log('压缩后的图片路径：', compressRes.tempFilePath);
    }
  });
  

二、使用第三方图片压缩库

如果需要更复杂的图片压缩功能，可以使用第三方图片压缩库，如 compressorjs。

1. 安装 compressorjs

• 安装 compressorjs：

  npm install compressorjs
  

2. 在 UniApp 中使用

• 示例：

  import Compressor from 'compressorjs';
  
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0];
      new Compressor(tempFilePath, {
        quality: 0.8, // 压缩质量（0-1）
        success: (result) => {
          console.log('压缩后的图片：', result);
        },
        error: (err) => {
          console.log('图片压缩失败：', err);
        }
      });
    }
  });
  

三、手动实现图片压缩

如果需要更灵活的控制，可以手动实现图片压缩。

1. 使用 Canvas 压缩图片

• 示例：

  function compressImage(file, quality = 0.8) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.src = URL.createObjectURL(file);
      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 = (err) => {
        reject(err);
      };
    });
  }
  
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0];
      compressImage(tempFilePath, 0.8).then((blob) => {
        console.log('压缩后的图片：', blob);
      });
    }
  });
  

四、总结

UniApp 处理图片压缩的步骤如下：

1. 使用 uni.compressImage API：通过 uni.compressImage API 实现图片压缩。
2. 使用第三方图片压缩库：通过 compressorjs 实现更复杂的图片压缩功能。
3. 手动实现图片压缩：通过 Canvas 实现灵活的图片压缩。

以下是一个完整的 uni.compressImage 示例：

uni.chooseImage({
  count: 1,
  success: (res) => {
    const tempFilePath = res.tempFilePaths[0];
    uni.compressImage({
      src: tempFilePath,
      quality: 80, // 压缩质量（0-100）
      success: (compressRes) => {
        console.log('压缩后的图片路径：', compressRes.tempFilePath);
      },
      fail: (err) => {
        console.log('图片压缩失败：', err);
      }
    });
  }
});

通过合理使用这些方法，可以轻松实现 UniApp 中的图片压缩功能，提升应用性能。