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 中的图像，我该怎么做？

寻找解决方案并阅读后，我了解我必须：

加载文件二进制内容。
将此二进制内容转换为base 64。
然后用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 = '';
  }

更新-如果您使用的是离子本机文件或Cordova文件插件

Ionic本机文件与浏览器的File对象不同。似乎有一个名为getFile()的方法，该方法返回FileEntry对象这有一个叫做方法.file()的东西，它返回一个本地文件对象。然后使用FileReader通过readAsDataURL方法将文件读取为dataURL。

Answer 2

最后，使用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),
      () => { }
    );
  }
}

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

显示下载的Blob图片

2 个答案:

更新-如果您使用的是离子本机文件或Cordova文件插件