显示下载的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}};显示它src="data:image/jpeg;base64,"+{{image_in_base64}};

但是直到现在我还没有能够执行步骤1（加载文件内容）和2（将其转换为base 64），我该怎么做？

Answer 1

以下是适合我的代码。

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

然后在你的打字稿代码中。

@ViewChild('fileinput') file_input;
file_obj:any;
onUploadChange() {
    const file = this.file_input.nativeElement.files[0];
    const fReader = new FileReader();
    fReader.readAsDataURL(file);
    fReader.onloadend = function(event) {
    //do whatever you want with the result here.
      console.log(event.target['result']);
    };
  }
 resetFileInput() {
    this.file_input.nativeElement.value = '';
  }

更新 - 如果您使用的是Ionic Native File或Cordova File Plugin

Ionic Native文件与浏览器File对象不同。 似乎有一个名为getFile（）的方法，它返回FileEntry对象。这有一个名为method .file（）的东西，它返回一个Native文件对象。 然后使用FileReader使用readAsDataURL方法将文件读取为dataURL。

Answer 2

最后，使用LocalStorage而不是文件更容易，更快捷

首先我将函数download_save_picture(picture_url)保存在localStorage(key)中的base64中picture_url中的图像内容，该键将是最后一个/之后的所有内容，因此如果我们使用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),
      () => { }
    );
  }
}

然后在视图中我用<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;
}