vue实现图片压缩
Vue 图片压缩实现方法
使用 HTML5 Canvas 压缩
通过 Canvas API 可以调整图片质量和尺寸实现压缩。创建一个图片压缩组件：
<template>
<div>
<input type="file" @change="compressImage" accept="image/*">
<img v-if="compressedImage" :src="compressedImage" alt="Compressed">
</div>
</template>
<script>
export default {
data() {
return {
compressedImage: null
}
},
methods: {
compressImage(e) {
const file = e.target.files[0]
if (!file) return
const reader = new FileReader()
reader.onload = event => {
const img = new Image()
img.onload = () => {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
// 设置压缩尺寸
const MAX_WIDTH = 800
const MAX_HEIGHT = 800
let width = img.width
let height = img.height
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width
width = MAX_WIDTH
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height
height = MAX_HEIGHT
}
}
canvas.width = width
canvas.height = height
ctx.drawImage(img, 0, 0, width, height)
// 质量参数 0.7 表示70%质量
this.compressedImage = canvas.toDataURL('image/jpeg', 0.7)
}
img.src = event.target.result
}
reader.readAsDataURL(file)
}
}
}
</script>使用第三方库
对于更复杂的压缩需求，可以使用专门的处理库：
npm install browser-image-compression组件实现示例：
import imageCompression from 'browser-image-compression'
methods: {
async compressWithLibrary(file) {
const options = {
maxSizeMB: 1, // 最大文件大小
maxWidthOrHeight: 1920, // 最大尺寸
useWebWorker: true // 使用多线程加速
}
try {
return await imageCompression(file, options)
} catch (error) {
console.error(error)
return file
}
}
}后端配合压缩
前端可以先将图片上传到临时位置，由后端进行专业压缩处理：
async uploadCompressed(file) {
const formData = new FormData()
formData.append('image', file)
try {
const response = await axios.post('/api/compress', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
return response.data.url
} catch (error) {
console.error('Upload failed:', error)
}
}性能优化建议
压缩大图片时显示加载状态避免界面卡顿 通过 Web Worker 将压缩过程放到后台线程执行 对不同设备类型设置不同的压缩参数 提供压缩质量选项让用户自行选择
注意事项
注意保留原始图片的宽高比 处理压缩失败的情况提供备用方案 移动端需要考虑内存限制问题 EXIF 信息可能在压缩过程中丢失需要特殊处理
