在Vue 3項目中壓縮圖片，可以有效優(yōu)化圖片體積，提升加載性能和用戶體驗。以下是幾種常用方案和核心代碼示例。

下表概述了主要的壓縮方案，你可以根據(jù)項目需求選擇：

??? 使用第三方庫壓縮

以下是幾種常用庫的具體使用方法。

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, // 最大文件大?。∕B）
    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手動壓縮圖片。這種方法可控性高，但需要自己處理細節(jié)。

<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', // 輸出格式，可根據(jù)需要調整
          });
          console.log('壓縮成功', compressedFile);
        },
        'image/jpeg', // 輸出格式
        0.7 // 輸出質量（0-1）
      );
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
};
</script>

?? 針對uni-app項目

如果你在使用uni-app開發(fā)多端應用，可以使用其官方生態(tài)中的image-utils插件。

安裝與使用：

1. 在項目的uni_modules目錄中安裝image-utils插件。
2. 在項目中引入并使用：

<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參數(shù)可能效果不佳，有時需要通過調整尺寸（size）進行壓縮。
• 合理設置參數(shù)：壓縮質量（quality）通常在 0.6 到 0.8 之間能在體積和質量間取得較好平衡。同時設置maxWidth和maxHeight可以防止圖片尺寸過大。
• 用戶體驗：壓縮是耗時操作，較大圖片尤其如此。建議提供加載指示器（如loading動畫）告知用戶操作進度。browser-image-compression等庫支持進度回調，可用于更新UI。
• 兼容性處理：對于不支持某些API（如Canvas、FileReader）的舊版瀏覽器，需要有回退方案（如直接上傳原圖）或友好提示。

?? 注意

• 第三方庫和Canvas壓縮方法主要在瀏覽器環(huán)境運行。如果需要在Node.js服務器端壓縮圖片，可使用如sharp等庫。
• 圖片壓縮是有損過程，過度壓縮會顯著降低圖片質量。務必根據(jù)實際場景測試并選擇合適的壓縮參數(shù)。

希望這些方法能幫助你在Vue 3項目中有效實現(xiàn)圖片壓縮。如果你對特定庫的使用有更多疑問，或者想了解更具體的場景實現(xiàn)，可以隨時提問。