Как в Ioni c Framework (v5) использовать изображения больших двоичных объектов, сохраненные в каталоге данных, в качестве встроенных и фоновых изображений? - PullRequest
Новая
       101

Как в Ioni c Framework (v5) использовать изображения больших двоичных объектов, сохраненные в каталоге данных, в качестве встроенных и фоновых изображений?

0 голосов
/ 27 мая 2020

Я создал функцию для загрузки и сохранения изображений blob, чтобы, если пользователь не в сети, изображения все еще можно было визуализировать. Я должен сделать это таким образом, так как продукты управляются через CMS.

Вот функция: 

downloadProductImages(products) {
  return new Promise((resolve, reject) => {
    this.platform.ready()
      .then(() => {
        for (let i = 0; i < products.length; i++) {
          const productImageUrl = SERVER_URL + products[i].imageUrl,
                fileName = products[i].image;
          this.http
            .sendRequest(productImageUrl, {
              method: 'download',
              filePath: this.directoryPath + fileName,
              responseType: 'blob'
            })
            .then((response: any) => {
              this.file.writeFile(this.directory, fileName, response, {replace: true})
                .then(_ => {
                  resolve();
                })
                .catch(error => {
                  reject();
                });
            })
            .catch(error => {
              reject();
            });
        }
      });
  });
}

Вот вид страницы, на которой я хотел бы отображать изображения: 

<div [ngStyle]="{'background-image': 'url(\'' + (productImage !== '' ? productImage : '../../assets/images/image-not-available.png' | sanitizeUrl) + '\')'}">
  <ion-row>
    <ion-col size="12" size-sm="6">
      <div class="show-mobile">
        <img [src]="(productImage !== '' ? productImage : '../../assets/images/image-not-available.png' | sanitizeUrl)" class="img-responsive">
      </div>
    </ion-col>
  </ion-row>
</div>

1 Ответ

0 голосов
/ 27 мая 2020

Файловый API в контексте браузера в основном построен на примере использования «чтение». Запись файлов на клиентский компьютер является предметом проблем безопасности, и на стороне клиента нет бесшовного API для этого.

Итак, подход, который вы можете использовать, здесь: BLOB-объекты с использованием Ioni c Storage (localForage поддерживает хранение BLOB-объектов в indexeddb)

при запуске приложения проверьте сохраненные BLOB-объекты и восстановите локальный кеш, запустив forEach l oop и создайте blobUrls create condition для чтения ваших элементов img из локального blobUrl, если приложение отключено

Направленно, что-то вроде этого ниже будет вашей основной функцией: 

async cacheImagesLocally() {

    // not sure what your products array looks like, but just for example here:
    const products = [{
      image: "image0",
      imageUrl: "someURL"
    }];

    // this one should probably be a property in your class:
    const localBlobUrlsCache = [];

    for (const product of products) {

      let localBlob = await this.storage.get(product.image);

      if (!localBlob) {

        const productImageUrl = SERVER_URL + product.imageUrl;
        const fileName = product.image;

        localBlob = await this.http.sendRequest(productImageUrl, {
          method: 'download',
          filePath: this.directoryPath + fileName,
          responseType: 'blob'
        });

      };

      localBlobUrlsCache.push({image: product.image, blobUrl: URL.createObjectURL(localBlob)});

    };

  };
...