前端图片压缩方案

在Vue 3项目中压缩图片，可以有效优化图片体积，提升加载性能和用户体验。以下是几种常用方案和核心代码示例。

下表概述了主要的压缩方案，你可以根据项目需求选择：

方案	特点	适用场景
compressorjs	功能丰富，配置灵活，支持通过质量或尺寸压缩	需要精细控制压缩参数的项目
browser-image-compression	支持WebWorker，防止界面卡顿，可限制文件大小或尺寸	需压缩大图片且避免阻塞主线程
image-conversion	支持按指定大小（如KB）进行压缩	需要精确控制输出文件大小的场景
Canvas API手动压缩	不依赖第三方库，可控性高	简单压缩需求或希望减少依赖的项目
uni-app项目	使用专用的`image-utils`插件	开发多端应用（如小程序、App）

🛠️ 使用第三方库压缩

以下是几种常用库的具体使用方法。

1. Compressor.js

Compressor.js是一款配置灵活的图片压缩库。

安装：

npm install compressorjs

在Vue组件中使用：

<template>
  <input type="file" @change="handleImageUpload" accept="image/*" />
</template>

<script setup>
import Compressor from 'compressorjs';

const handleImageUpload = (event) => {
  const file = event.target.files[0];
  if (!file) return;

  new Compressor(file, {
    quality: 0.6, // 压缩质量 (0-1)
    success(result) {
      // 处理压缩后的文件，例如上传到服务器
      const compressedFile = new File([result], file.name, { type: result.type });
      console.log('压缩成功', compressedFile);
    },
    error(err) {
      console.error('压缩失败:', err.message);
    },
  });
};
</script>

2. browser-image-compression

此库支持WebWorker，压缩大图片时不易阻塞界面交互。

安装：

npm install browser-image-compression

在Vue组件中使用：

<template>
  <input type="file" @change="handleImageUpload" accept="image/*" />
</template>

<script setup>
import imageCompression from 'browser-image-compression';

const handleImageUpload = async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const options = {
    maxSizeMB: 1, // 最大文件大小（MB）
    maxWidthOrHeight: 1920, // 最大宽或高
    useWebWorker: true, // 使用WebWorker，避免阻塞界面
    initialQuality: 0.8, // 初始压缩质量（0-1），但browser-image-compression选项名可能为`initialQuality`，请注意文档
  };

  try {
    const compressedFile = await imageCompression(file, options);
    console.log('压缩成功', compressedFile);
    // 注意：compressedFile是一个Blob或File对象，可直接用于上传
  } catch (error) {
    console.error('压缩失败:', error);
  }
};
</script>

3. image-conversion

此库的一个特色是支持按指定大小（如KB）进行压缩。

安装：

npm install image-conversion

在Vue组件中使用：

<template>
  <input type="file" @change="handleFileChange" accept="image/*">
  <img v-if="compressedImage" :src="compressedImage" alt="Compressed Image" />
</template>

<script setup>
import { ref } from 'vue';
import imageConversion from 'image-conversion';

const compressedImage = ref(null);

const handleFileChange = async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  try {
    // 压缩到大约200KB
    const compressedFile = await imageConversion.compressAccurately(file, {
      size: 200, // 目标大小，单位KB
      accuracy: 0.9 // 压缩精度
    });
    compressedImage.value = URL.createObjectURL(compressedFile);
    console.log('压缩成功', compressedFile);
  } catch (error) {
    console.error('Error compressing image:', error);
  }
};
</script>

📝 手动使用Canvas压缩

如果不希望引入第三方库，可以使用HTML5的Canvas API手动压缩图片。这种方法可控性高，但需要自己处理细节。

<template>
  <input type="file" @change="handleImageUpload" accept="image/*" />
  <canvas ref="canvas" style="display: none;"></canvas>
</template>

<script setup>
import { ref } from 'vue';

const canvas = ref(null);

const handleImageUpload = (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    const img = new Image();
    img.onload = () => {
      const ctx = canvas.value.getContext('2d');
      
      // 设置最大宽高
      const maxWidth = 800;
      const maxHeight = 600;
      let { width, height } = img;

      // 等比例缩放计算
      if (width > height) {
        if (width > maxWidth) {
          height *= maxWidth / width;
          width = maxWidth;
        }
      } else {
        if (height > maxHeight) {
          width *= maxHeight / height;
          height = maxHeight;
        }
      }

      // 设置Canvas尺寸并绘制图片
      canvas.value.width = width;
      canvas.value.height = height;
      ctx.drawImage(img, 0, 0, width, height);

      // 转换为Blob（压缩后的图片）
      canvas.value.toBlob(
        (blob) => {
          const compressedFile = new File([blob], file.name, {
            type: 'image/jpeg', // 输出格式，可根据需要调整
          });
          console.log('压缩成功', compressedFile);
        },
        'image/jpeg', // 输出格式
        0.7 // 输出质量（0-1）
      );
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
};
</script>

🌐 针对uni-app项目

如果你在使用uni-app开发多端应用，可以使用其官方生态中的image-utils插件。

安装与使用：

在项目的uni_modules目录中安装image-utils插件。
在项目中引入并使用：

<script setup>
import { compressImage } from '@/uni_modules/image-utils';

// 选择图片并压缩
uni.chooseImage({
  count: 1,
  success: async (res) => {
    const filePath = res.tempFilePaths[0];
    try {
      const result = await compressImage(filePath, {
        quality: 0.8, // 压缩质量
        maxWidth: 1200, // 最大宽度
        maxHeight: 800, // 最大高度
      });
      console.log('压缩成功', result.tempFilePath);
      console.log(`原始大小: ${result.originalSize}KB, 压缩后: ${result.size}KB`);
    } catch (error) {
      console.error('压缩失败:', error);
    }
  },
});
</script>

💡 实践建议

图片格式选择：JPEG格式通常更适合压缩照片类图片，而PNG格式更适合需要保留透明度的图片。需要注意的是，compressorjs对PNG图片的压缩，如果通过quality参数可能效果不佳，有时需要通过调整尺寸（size）进行压缩。
合理设置参数：压缩质量（quality）通常在 0.6 到 0.8 之间能在体积和质量间取得较好平衡。同时设置maxWidth和maxHeight可以防止图片尺寸过大。
用户体验：压缩是耗时操作，较大图片尤其如此。建议提供加载指示器（如loading动画）告知用户操作进度。browser-image-compression等库支持进度回调，可用于更新UI。
兼容性处理：对于不支持某些API（如Canvas、FileReader）的旧版浏览器，需要有回退方案（如直接上传原图）或友好提示。

⚠️ 注意

第三方库和Canvas压缩方法主要在浏览器环境运行。如果需要在Node.js服务器端压缩图片，可使用如sharp等库。
图片压缩是有损过程，过度压缩会显著降低图片质量。务必根据实际场景测试并选择合适的压缩参数。

希望这些方法能帮助你在Vue 3项目中有效实现图片压缩。如果你对特定库的使用有更多疑问，或者想了解更具体的场景实现，可以随时提问。

posted @ 2025-11-05 13:49 dirgo 阅读(84) 评论(0) 收藏举报

刷新页面返回顶部

Chobits

前端图片压缩方案

🛠️ 使用第三方库压缩

1. Compressor.js

2. browser-image-compression

3. image-conversion

📝 手动使用Canvas压缩

🌐 针对uni-app项目

💡 实践建议

⚠️ 注意

公告