Просмотр / Поток списка изображений из s3 в ионном

Question

Просмотр / Поток списка изображений из s3 в ионном

0

Мы хотели бы перенести хостинг изображений, загруженных с помощью мобильного телефона в AWS S3 (изображения не просматриваются публично) вместо локального хранилища сервера. Задача состоит в том, что, как просматривать/транслировать изображения наиболее эффективным способом и ограничивать потребление памяти на мобильном телефоне, так как мы будем отправлять запрос серверу AWS S3 для предоставления в качестве файла url.

В документации мы можем просмотреть URL-адрес изображения через s3.getSignedUrl и который будет иметь ответ защищенного URL-адреса.

var s3 = new AWS.S3();
var params = {
    Bucket: 'myBucket',
    Key: 'mypath/image.jpg'
  };

s3.getSignedUrl ('getObject', params, function (err, url) {
      console.log(url);
  });

В ионном мобильном приложении мы использовали image-lazy-src для эффективной загрузки изображений, не дожидаясь загрузки других. Теперь задача состоит в том, как реализовать ленивую нагрузку для S3. Я думал создать директиву, которая загружала/запрашивала URL-адрес изображения из s3, а затем использовала изображение-lazy-src для загрузки изображений. Я не знаю, является ли это целесообразным способом, так как вы будете отправлять последовательное N количество запросов на S3 зависит от количества изображений, которые у вас есть в вашем списке.

chkm8 25 апр. 2016, в 08:41

Источник

Теги:

ionic-framework

angularjs

amazon-s3

image

lazy-loading

1 ответ

Ещё вопросы

chkm8 · Answer 1 · 2016-04-25T06-28-00.000Z

Мы смогли найти временное решение или альтернативу. Мы отредактировали директиву image-lazy-src и создали новый с S3 сначала, чтобы загрузить urs-url, а затем загрузили его в загрузчик изображений-lazy-src.

var s3_url;
 if ($scope.imageLazyBackgroundImage == "true") {  

  var bgImg = new Image();
  bgImg.onload = function () {
      if ($attributes.imageLazyLoader) {
          loader.remove();
      }
      $element[0].style.backgroundImage = 'url(' + s3_url + ')'; // set style attribute on element (it will load image)
      if ($scope.lazyScrollResize == "true") {
          //Call the resize to recalculate the size of the screen
          $ionicScrollDelegate.resize();
      }
  };

  bgImg.src =  s3_url;


  } else {
    //Download the aws image url and then assign it to the created image
    AwsService.generateAwsUrl('test').then(function(url){
      s3_url= url;
      $element[0].src = s3_url;// set src attribute on element (it will load image)
    },function(error) {
      console.log(error);
    });
   }
 }