vue实现压缩图片
压缩图片的实现方法
在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>注意事项
压缩比例需要根据实际需求调整，过高的压缩会导致图片质量明显下降
移动端需要考虑性能问题，大图片压缩可能导致内存问题
压缩后的图片格式通常是JPEG或WebP，PNG格式压缩效果有限
服务端也需要设置合理的文件大小限制，防止大文件上传
以上方法可以根据项目需求选择使用，canvas API适合简单场景，专用库提供了更多选项和更好的兼容性处理。
