Показать загруженное изображение 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. Преобразовать этот двоичный контент в базу 64.

3. Затем отобразите его с помощью src="data:image/jpeg;base64,"+{{image_in_base64}};

Но до сих пор я не мог выполнить шаги 1 (загрузить содержимое файла) и 2 (преобразовать его в базу 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),
      () => { }
    );
  }
}

Затем в представлении я отображаю изображение с помощью <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;
}

Answer 2

Ниже приведен код, который работал для меня.

<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 Это имеет метод с именем .file () , который возвращает объект Native file. А затем используйте FileReader для чтения файла как dataURL с использованием метода readAsDataURL.