如何将FileAccess API的FileHandler读取的文件用于img标签

你已经拿到文件句柄的前提下，有两种成熟实现方案，按需选择即可：

方案1：Base64 Data URL 方案 #

适合小尺寸图片，不需要手动管理内存：

• 第一步：从句柄获取原生File对象
  调用文件句柄的getFile方法，拿到和文件选择器返回值完全一致的原生File实例：

  const file = await fileHandle.getFile();
  

• 第二步：封装FileReader方法把File转Base64
  原生FileReader可以直接读取文件为Data URL格式，输出结果自带正确的MIME类型前缀，不需要手动拼接：

  const file2Base64 = (file) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.onerror = (err) => reject(err);
      reader.readAsDataURL(file);
    })
  }
  
  // 调用获取base64地址
  const imgBase64Url = await file2Base64(file);
  

• 第三步：赋值给img标签
  直接把结果赋值给img的src属性即可，浏览器可直接识别加载：

  document.querySelector('img.target').src = imgBase64Url;
  

方案2：Blob临时地址方案（推荐大尺寸图片使用） #

Base64编码会让文件体积膨胀约1/3，大图片用这个方案性能更好：

• 拿到File对象后直接生成临时Blob地址即可：

  const file = await fileHandle.getFile();
  const blobUrl = URL.createObjectURL(file);
  document.querySelector('img.target').src = blobUrl;
  
  // 图片加载完成不需要用到这个地址时，记得释放内存
  // img.onload = () => URL.revokeObjectURL(blobUrl)
  

批量处理HTML内多个本地图片的场景：先解析HTML文本提取所有img标签的相对src路径，通过已有的目录句柄按路径找到对应图片的fileHandle，再用上面的逻辑转成可用地址替换原src值即可。

内容的提问来源于stack exchange，提问作者Atul Bhatt