javascript - 显示下载的 blob 图像

Question

我正在尝试能够显示可在后端编辑的图像，但这些图像也必须在离线时可用。为了实现这个目标，我使用以下方法下载这些图像(这是唯一对我有用的方法)

download_save_picture(picture_url) {
  let splited_url = picture_url.split('/');
  var filename = splited_url[splited_url.length - 1];

  var config = { responseType: 'blob' as 'blob' };

  this.httpClient.get(picture_url, config).subscribe(
    data => {
      this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true });
    },
    err => console.error(err),
    () => { }
  );
}

然后我可以验证这些文件是否存在，并且它们的权重也不同于 0，所以我猜直到此时一切都是正确的。

this.file.checkFile(this.file.dataDirectory, filename)
.then(() => {
  alert("File Exist!!!");  // I always enter here
})
.catch((err) => {
  alert("ERR : " + err);
});

this.file.resolveLocalFilesystemUrl(this.file.dataDirectory + filename).then((entry: any)=>{
  entry.getMetadata((metadata) => {
      alert("SIZE: " + metadata.size);
  })
}).catch((error)=>{
  alert(error);
});

所以下一步是显示路径 this.file.dataDirectory + filename 中的图像，我该怎么做？

在搜索解决方案并阅读之后，我明白我必须:

1. 加载文件二进制内容。

2. 将此二进制内容转换为 base 64。

3. 然后用src="data:image/jpeg;base64,"+{{image_in_base64}};

   显示出来

但直到现在我还无法执行步骤 1(加载文件内容)和步骤 2(将其转换为 base 64)，我该怎么做？

Answer 1

最后，使用 LocalStorage 比使用文件更容易、更快捷

首先我创建了函数download_save_picture(picture_url)将图片内容保存在picture_url中在 Base64 中 localStorage(key) ，关键将是最后一个 / 之后的所有内容，所以如果我们使用 URL https://www.w3schools.com/w3css/img_lights.jpg内容将保存在icon.img_lights.jpg中.

download_save_picture(picture_url) {
  let splited_url = picture_url.split('/');
  var name = splited_url[splited_url.length - 1];

  if (localStorage.getItem('icon.' + name) === null) {
    var config = { responseType: 'blob' as 'blob' };

    this.httpClient.get(picture_url, config).subscribe(
      data => {
        var reader = new FileReader();

        reader.readAsDataURL(data);

        reader.onload = function() {
          window.localStorage.setItem('icon.' + name, reader.result);
        }
      },
      err => console.error(err),
      () => { }
    );
  }
}

然后在 View 中我用 <img src={{useLocalImage(item.image)}}></p> 显示图像, 其中useLocalImage简单地返回保存在 localStorage 中的内容。

useLocalImage(picture_url) {
  let splited_url = picture_url.split('/');
  var name = splited_url[splited_url.length - 1];

  var icon_name = window.localStorage.getItem('icon.' + name);

  return icon_name;
}