项目场景:
用户头像编辑: 需要用户从本地选择图片后, 能在本地预览和简单编辑图片
问题描述
使用的readAsDataURL生成图片的本地预览地址。用户选择小图片时还好,一旦超过5M, 选择后会卡一下,后面的简单编辑(使用了图片的css属性clip)更是卡的不行
getImgSize(imgFile) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.readAsDataURL(imgFile);
reader.onload = function () {
let image = new Image();
image.src = reader.result;
image.onload = function () {
resolve({
width: this.width,
height: this.height,
src: this.src,
});
};
};
});
},
原因分析:
FileReader.readAsDataURL(file)返回值是转化后的超长base64字符串(长度与要解析的文件大小正相关,且大于要解析的文件),用户选择的图片体积越大,浏览器渲染的压力就越大
解决方案:
使用URL.createObjectURL()代替,createObjectURL返回一段带hash的url,可以节省性能并更快速,只不过需要在不使用的情况下手动释放内存。
getImgSize(imgFile) {
return new Promise((resolve, reject) => {
let url = window.URL || window.webkitURL;
let img = new Image();
if (this.imgLocalSrc) {
url.revokeObjectURL(this.imgLocalSrc);
}
this.imgLocalSrc = url.createObjectURL(imgFile);
img.src = this.imgLocalSrc;
img.onload = function () {
resolve({
width: this.width,
height: this.height,
src: this.src,
});
};
});
},