使用readAsDataURL过程中遇到的问题

最新推荐文章于 2024-01-16 14:36:00 发布

原创最新推荐文章于 2024-01-16 14:36:00 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

踩坑日记专栏收录该内容

10 篇文章

订阅专栏

在用户头像编辑项目中，使用FileReader的readAsDataURL方法预览大图片时，会导致浏览器卡顿。原因是生成的base64字符串过长，增大了渲染压力。为优化性能，采用URL.createObjectURL作为替代方案，它返回的url更高效，但在不再使用时需手动释放内存。

项目场景：

用户头像编辑: 需要用户从本地选择图片后, 能在本地预览和简单编辑图片

问题描述

使用的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,
      });
    };
  });
},