前端js图片获取base64格式的两种方式,压缩图片,解决vuex不能保存大像素图片数据问题
前端图片获取base64的两种方式,压缩图片,vuex无法保存较大图片数据问题;
·
做项目的时候,遇到在一个组件中上传了图片,跳转到其他组件,依然需要用到该图片信息;
项目中我利用了vuex 进行状态管理,刚开始我是把上传的图片用fileReader的方式把上传的图片变成base64格式,然后存在vuex中,代码如下:
getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener("load", () => callback(reader.result));
reader.readAsDataURL(img);
},
这时候就遇到第一个问题:上传大像素图片后,base64占用的空间大小几乎是图片的2倍,vuex存的方式用的是localstorage存的,无法存储超过5m的数据。
解决方法:用canvas的方式把图片压缩再获取被压缩后图片的base64格式;代码如下:
getBase64(file) {
// console.log(file)
this.fileList = [file];
let _this = this;
let img = document.createElement('img');
let cvs = document.createElement('canvas');
// let file = me.files[0]; // 获取到文件对象
// 上传的图片大于 500KB 时才压缩
if (file && (file.size / 1024 > 500)) {
let reader = new FileReader();
reader.readAsDataURL(file); // 转成 base64 编码
reader.onload = function (e) {
let naturalBase64 = e.target.result; // 获取 base64 编码,这是原图的
img.src = naturalBase64;
img.onload = function () {
let ratio = img.naturalWidth / img.naturalHeight; // 获取原图比例,为了等比压缩
cvs.width = 400;
cvs.height = cvs.width / ratio;
let ctx = cvs.getContext('2d');
ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // 画在 canvas 上
// 压缩后新图的 base64
let zipBase64 = cvs.toDataURL();
_this.previewImage = zipBase64;
_this.$store.commit("search/fileList", [{ name: file.name, base64: zipBase64 }])
_this.$store.commit("search/base64", [{ name: file.name, base64: zipBase64 }])
// console.log(zipBase64)
}
}
} else {
let reader = new FileReader();
reader.readAsDataURL(file); // 转成 base64 编码
reader.onload = function (e) {
let naturalBase64 = e.target.result;
_this.previewImage = naturalBase64;
_this.$store.commit("search/fileList", [{ name: file.name, base64: naturalBase64 }])
_this.$store.commit("search/base64", [{ name: file.name, base64: naturalBase64 }])
// console.log(naturalBase64)
}
}
},
备注:我这里把压缩之后获取到的base64有用vuex存了,建议大数据不用vuex存,可以把大数据直接挂在到window下面,可以写成window._xxx = xxx;然后直接从window下面取;但是存在window下面 刷新页面数据就没有了;
更多推荐
所有评论(0)