vue实现图片压缩
使用 canvas 实现图片压缩
在 Vue 中可以通过 canvas 的 drawImage 和 toDataURL 方法实现图片压缩。创建一个方法接收 File 对象和压缩比例参数，返回压缩后的 base64 或 Blob 对象。
function compressImage(file, quality = 0.8) {
return new Promise((resolve) => {
const reader = new FileReader()
reader.onload = (e) => {
const img = new Image()
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
)
}
img.src = e.target.result
}
reader.readAsDataURL(file)
})
}集成到 Vue 组件
在组件中创建文件上传 input，调用压缩方法后显示预览或上传到服务器。
<template>
<div>
<input type="file" @change="handleUpload" accept="image/*">
<img v-if="previewUrl" :src="previewUrl" style="max-width: 300px">
</div>
</template>
<script>
export default {
data() {
return {
previewUrl: ''
}
},
methods: {
async handleUpload(e) {
const file = e.target.files[0]
if (!file) return
const compressedBlob = await compressImage(file)
this.previewUrl = URL.createObjectURL(compressedBlob)
// 上传逻辑
const formData = new FormData()
formData.append('image', compressedBlob, file.name)
// axios.post('/upload', formData)
}
}
}
</script>使用第三方库
对于更复杂的压缩需求，可以使用专门的处理库：
- compressorjs - 提供更多压缩选项
npm install compressorjs
import Compressor from 'compressorjs'
new Compressor(file, {
quality: 0.6,
success(result) {
// 处理压缩结果
}
})- image-conversion - 支持多种输出格式
npm install image-conversion
import * as imageConversion from 'image-conversion'
imageConversion.compress(file, 0.5).then(res => {
// 处理压缩结果
})注意事项
- 大图片压缩时需要考虑内存问题，建议限制上传文件大小
- 移动端拍摄的照片可能包含 EXIF 旋转信息，需要正确处理方向
- 不同格式图片压缩效果不同，JPEG 适合照片，PNG 适合带透明度的图片
- 压缩比例需要根据实际需求调整，过高的压缩会导致明显质量下降
