当前位置：首页 > VUE

vue实现压缩图片

2026-02-24 15:10:44VUE

压缩图片的实现方法

在Vue项目中实现图片压缩，通常需要使用第三方库或原生JavaScript API。以下是几种常见方法：

使用canvas API压缩图片

function compressImage(file, quality = 0.8) {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = (event) => {
      const img = new Image()
      img.src = event.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, canvas.width, canvas.height)
        canvas.toBlob(
          (blob) => resolve(blob),
          'image/jpeg',
          quality
        )
      }
    }
  })
}

使用image-compressor库

安装image-compressor库：

npm install image-compressor.js

在Vue组件中使用：

import ImageCompressor from 'image-compressor.js'

methods: {
  async handleUpload(file) {
    try {
      const compressedFile = await new ImageCompressor(file, {
        quality: 0.6,
        maxWidth: 1920,
        maxHeight: 1080,
        convertSize: 1000000, // 大于1MB时自动转换为JPEG
        success(result) {
          return result
        }
      })
      // 处理压缩后的文件
    } catch (error) {
      console.error(error)
    }
  }
}

使用compressorjs库

安装compressorjs：

npm install compressorjs

在Vue组件中使用：

import Compressor from 'compressorjs'

methods: {
  compressImage(file) {
    new Compressor(file, {
      quality: 0.8,
      success(result) {
        // 处理压缩结果
      },
      error(err) {
        console.error(err.message)
      }
    })
  }
}

实现图片上传组件

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

<script>
import Compressor from 'compressorjs'

export default {
  methods: {
    handleUpload(e) {
      const file = e.target.files[0]
      if (!file) return

      new Compressor(file, {
        quality: 0.6,
        maxWidth: 1920,
        maxHeight: 1080,
        success: (result) => {
          const formData = new FormData()
          formData.append('file', result, result.name)
          // 上传到服务器
        },
        error: (err) => {
          console.error(err.message)
        }
      })
    }
  }
}
</script>