Javascript 显示下载的blob图像

我试图能够显示可以在后端编辑的图像，但这些图像也必须在脱机时可用。为了实现这个目标，我用以下方法下载这些图片（这是唯一对我有效的方法）

然后我可以验证这些文件是否存在，并且它们的权重也不同于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

中的图像，我如何才能做到这一点

在寻找解决方案并阅读之后，我明白我必须：

加载文件二进制内容

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

然后用

src=“data:image/jpeg；base64，”+{{image\u in_base64}

---

但到目前为止，我还无法执行步骤1（加载文件内容）和步骤2（将其转换为base 64），我如何才能做到这一点？

以下是适用于我的代码

<input #fileinput type="file" [(ngModel)]="file_obj" (click)="resetFileInput()" (change)="onUploadChange()"/>

更新-如果您使用的是爱奥尼亚原生文件或Cordova文件插件 Ionic本机文件与浏览器文件对象不同。

---

似乎有一个名为的方法，它返回FileEntry对象 这有一个名为method的东西，它返回一个本机文件对象。

---

然后使用FileReader使用readAsDataURL方法将文件作为dataURL读取。

最后，使用LocalStorage代替文件更容易、更快

首先，我在

localStorage（key）

中创建了功能

download\u save\u picture（picture\u url）

，该功能将图像的内容保存在

picture\u url

中的Base64中，最后一个

//code>之后的所有内容都是该键，所以如果我们使用URL
https://www.w3schools.com/w3css/img_lights.jpg
内容将保存在
icon.img\u 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),
      () => { }
    );
  }
}

然后在视图中，我用
显示图像，其中
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;
}

这听起来可能很愚蠢，但假设你可以从磁盘读取文件，你就不能将你的映像src指向磁盘上的文件吗？@Mathyn我试过
src={{full_path_image}}
，但它不起作用，这就是你的意思吗？你这样做时有错误吗？e、 g.a 404或其他什么？对于第一步和第二步，请尝试以下操作：@Mathyn the
this.file.writeFile（this.file.dataDirectory，filename，data，{replace:true}）
在浏览器中不工作，所以我必须在实际的Android设备上测试iit。在我的例子中，当我使用
src={{full_path_image}}
时，甚至不会显示整个页面，但是删除它会使一切正常工作。我应该将
文件路径放在哪里？在浏览器中，您将无法给出打开文件的文件路径，您需要通过输入文件字段选择它。如果您使用的是Cordova库，那么您需要参考该文档，这是一个名为.file方法的方法。您可以使用此方法获取文件对象，然后使用FileReader将文件读取为DataUrl。执行此操作时，请记住适用于本地存储的限制。有关更多信息，请参阅问题。
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),
      () => { }
    );
  }
}

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;
}