前言
需求：项目当中上传图片的需求点肯定有很多，再上传之后，如果图片很大的话，在加载的时候就会很慢。最近发现系统首次加载越来越慢，就开始思考怎么能降低这个加载时间，由于首页图片很多，所以图片的大小就需要进行处理，本文记录了上传图片之前压缩图片的各种方法。
一、插件image-conversion
1. 安装依赖：
npm i image-conversion
2.页面当中引入：
import * as imageConversion from 'image-conversion'
3.使用：
//把图片文件作为参数传递到方法中
// 上传之前的钩子函数
beforeUpload(file) {
// 判断是图片
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
console.log('上传头像图片只能是 JPG 或 PNG 格式!');
return false;
}
return new Promise((resolve) => {
// 压缩到100KB,这里的100就是要压缩的大小,可自定义
imageConversion.compressAccurately(file, 100).then(res => {
console.log(res)
resolve(res);
});
})
}
二、canvas
1.上传组件方法：
代码如下（示例）：
methods: {
// 文件上传成功
uploadSuccess(res) {
if (res.code === 200) {
this.imgs.push({ name: res.data, url: this.$fileUrl_ + '/' + res.data, path: res.data })
} else {
console.error('文件上传失败', res.msg)
}
},
// 上传文件之前
beforeAvatarUpload(file) {
// 图片大小大于2M进行图片压缩
if (file.size / 1024 / 1024 > 2) {
const that = this
return new Promise(resolve => {
const reader = new FileReader()
const image = new Image()
image.onload = (imageEvent) => {
const canvas = document.createElement('canvas') // 创建画布
const context = canvas.getContext('2d') // 画布为2d
const width = image.width * that.quality // 图片宽度 * 压缩比例
const height = image.height * that.quality // 图片高度 * 压缩比例
canvas.width = width // 画布宽度
canvas.height = height // 画布宽度
context.clearRect(0, 0, width, height)
context.drawImage(image, 0, 0, width, height)
const dataUrl = canvas.toDataURL(file.type) //图片转路径
const blobData = that.dataURLtoBlob(dataUrl, file.type) //图片转二进制
resolve(blobData)
}
reader.onload = e => { image.src = e.target.result }
reader.readAsDataURL(file)
})
} else {
return true
}
},
//图片转二进制
dataURLtoBlob(dataURL, type) {
var binary = atob(dataURI.split(',')[1])
var array = []
for (var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i))
}
return new Blob([new Uint8Array(array)], { type: type })
},
// 图片移除
handleRemove(file, fileList) {
const arr = []
fileList.forEach(r => {
arr.push(r.response.data)
})
this.imgs = arr
},
// 图片预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
}
https://blog.csdn.net/an_jia_ning/article/details/129177011
————————————————
版权声明：本文为CSDN博主「an_jia_ning」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/an_jia_ning/article/details/129177011