快捷導(dǎo)航

使用Vue進(jìn)行圖片壓縮的實(shí)現(xiàn)方案和對(duì)比

更新時(shí)間：2025年10月23日 09:47:35 作者：涼柚ˇ

在 Vue 項(xiàng)目中處理用戶上傳的大圖片時(shí),通過(guò)前端壓縮減小圖片體積是優(yōu)化上傳體驗(yàn)的有效方式,本文將和大家介紹幾個(gè)具體實(shí)現(xiàn)方案及相關(guān)說(shuō)明,希望對(duì)大家有所幫助

一、圖片壓縮方案對(duì)比

不同壓縮方案在體積縮減、兼容性、耗時(shí)等方面各有特點(diǎn)，具體如下：

方案	體積縮減	兼容性	耗時(shí)	備注
Canvas 縮放	60-85%	99%	中	本文主方案
WebP encode	額外-30%	92%	高	需服務(wù)端配合回退 JPG
WebAssembly	70-90%	92%	高	mozJPEG/avif-js，包大
服務(wù)端壓縮	0%	100%	低	前端仍要先傳原圖

二、核心實(shí)現(xiàn)：Canvas 縮放壓縮

利用 HTML5 的 Canvas API，通過(guò)調(diào)整圖片尺寸和質(zhì)量實(shí)現(xiàn)壓縮，是兼容性和效果平衡較好的方案。

1. 壓縮工具函數(shù)

核心思路是利用 HTML5 的 Canvas API 對(duì)圖片進(jìn)行壓縮，主要通過(guò)調(diào)整圖片尺寸和質(zhì)量來(lái)實(shí)現(xiàn)。

/**
 * 圖片壓縮工具
 * @param file 原始圖片文件
 * @param options 壓縮選項(xiàng)
 * @returns 壓縮后的圖片文件
 */
export const compressImage = async (
  file: File,
  options: {
    maxWidth?: number;    // 最大寬度
    maxHeight?: number;   // 最大高度
    quality?: number;     // 圖片質(zhì)量 0-1
  } = {}
): Promise<File | null> => {
  // 默認(rèn)配置
  const {
    maxWidth = 1200,
    maxHeight = 1200,
    quality = 0.8
  } = options;

  return new Promise((resolve) => {
    // 創(chuàng)建圖片對(duì)象
    const img = new Image();
    const objectUrl = URL.createObjectURL(file);
    img.src = objectUrl;

    img.onload = () => {
      URL.revokeObjectURL(objectUrl);

      // 計(jì)算壓縮后的尺寸（保持比例）
      let width = img.width;
      let height = img.height;

      // 如果圖片尺寸超過(guò)最大限制，按比例縮小
      if (width > maxWidth || height > maxHeight) {
        const ratio = Math.min(maxWidth / width, maxHeight / height);
        width = width * ratio;
        height = height * ratio;
      }

      // 創(chuàng)建Canvas元素
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;

      // 繪制圖片到Canvas
      const ctx = canvas.getContext('2d');
      if (!ctx) {
        resolve(null);
        return;
      }
      
      ctx.drawImage(img, 0, 0, width, height);

      // 將Canvas內(nèi)容轉(zhuǎn)換為Blob
      canvas.toBlob(
        (blob) => {
          if (!blob) {
            resolve(null);
            return;
          }

          // 轉(zhuǎn)換為File對(duì)象
          const compressedFile = new File(
            [blob],
            file.name,
            { type: blob.type, lastModified: Date.now() }
          );
          resolve(compressedFile);
        },
        file.type || 'image/jpeg',
        quality
      );
    };

    img.onerror = () => {
      URL.revokeObjectURL(objectUrl);
      resolve(null);
    };
  });
};

2. Vue3 組件中使用示例

<template>
  <div class="image-upload">
    <input
      type="file"
      accept="image/*"
      @change="handleFileChange"
      class="file-input"
    />
    
    <div v-if="previewUrl" class="preview">
      <img :src="previewUrl" alt="預(yù)覽圖" class="preview-img" />
      <p>原始大小: {{ originalSize }}KB</p>
      <p v-if="compressedSize">壓縮后大小: {{ compressedSize }}KB</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { compressImage } from '@/utils/imageCompressor';

const previewUrl = ref('');
const originalSize = ref(0);
const compressedSize = ref(0);

const handleFileChange = async (e: Event) => {
  const input = e.target as HTMLInputElement;
  if (!input.files || input.files.length === 0) return;

  const file = input.files[0];
  
  // 顯示原始文件大小
  originalSize.value = Math.round(file.size / 1024);
  
  // 如果文件小于500KB，不壓縮直接使用
  if (file.size < 500 * 1024) {
    previewUrl.value = URL.createObjectURL(file);
    compressedSize.value = originalSize.value;
    return;
  }

  // 壓縮圖片
  const compressedFile = await compressImage(file, {
    maxWidth: 1000,
    maxHeight: 1000,
    quality: 0.7
  });

  if (compressedFile) {
    previewUrl.value = URL.createObjectURL(compressedFile);
    compressedSize.value = Math.round(compressedFile.size / 1024);
    
    // 這里可以將compressedFile上傳到服務(wù)器
    // await uploadToServer(compressedFile);
  }
};
</script>

<style scoped>
.image-upload {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.file-input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.preview {
  margin-top: 1rem;
}

.preview-img {
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>

三、服務(wù)端二次校驗(yàn)（Node 示例）

router.post('/upload', multer().single('file'), async (req, res) => {
  const { buffer, mimetype, size } = req.file;
  if (size > 1024 * 1024) return res.status(413).send('too big');
  if (!['image/jpeg', 'image/webp'].includes(mimetype)) return res.status(400).send('bad type');

  // 計(jì)算 SSIM 或 Magic Number 防止“偽造壓縮”
  const metadata = await sharp(buffer).metadata();
  if (metadata.width! > 1600) return res.status(400).send('width overflow');

  // 真正落盤(pán)
  await putToOSS(buffer, mimetype);
  res.json({ url });
});