Отображение изображения с устройства в ионном режиме - PullRequest
Новая
       6

Отображение изображения с устройства в ионном режиме

0 голосов
/ 12 ноября 2018

enter image description here Допустим, у меня есть изображение под file:///storage/emulated/0/Android/data/io.ionic.starter/cache/1542035689920.jpg path.Можно ли отобразить это изображение в теге <image>, просто назначив свойство .url?Наверное, нет, если так, есть ли хорошие решения для этого?Я пытаюсь сделать эскиз изображения в списке, способ, которым я это сделал, - прочитать изображение как base64, преобразовать его с использованием canvas и отобразить его.Проблема в том, что для рендеринга всех изображений требуется слишком много времени. 

ionViewDidLoad() {
    this.defectImages.forEach(defectImage => this.loadThumbnail(defectImage.url))
  }

  loadThumbnail(url) {
    return this.fileProvider.getDefectCachedImage(url)
      .then(data => {
        return this.generateFromImage(data, 400, 400, 0.5, thumbnail => {
          let image = document.getElementById(url) as any;
          image.src = thumbnail;
        })
      });
  }

  showImage(url: string) {
    this.photoViewer.show(this.fileProvider.getCacheFolderPath() + url, '', {share: true})
  }

  generateFromImage(img, MAX_WIDTH: number = 700, MAX_HEIGHT: number = 700, quality: number = 0.5, callback) {
    var canvas: any = document.createElement("canvas");
    var image = new Image();

    image.onload = () => {
      var width = image.width;
      var height = image.height;

      if (width > height) {
        if (width > MAX_WIDTH) {
          height *= MAX_WIDTH / width;
          width = MAX_WIDTH;
        }
      } else {
        if (height > MAX_HEIGHT) {
          width *= MAX_HEIGHT / height;
          height = MAX_HEIGHT;
        }
      }
      canvas.width = width;
      canvas.height = height;
      var ctx = canvas.getContext("2d");

      ctx.drawImage(image, 0, 0, width, height);

      // IMPORTANT: 'jpeg' NOT 'jpg'
      var dataUrl = canvas.toDataURL('image/jpeg', quality);

      callback(dataUrl)
    };
    image.src = img;
  }

Работает, но работает слишком медленно.Я заметил пакет PhotoLibrary, но, насколько мне известно, он имеет доступ к общей памяти, и мои изображения хранятся только в пространстве приложения.

1 Ответ

0 голосов
/ 13 ноября 2018

Это проблема с последним веб-просмотром.Последний веб-просмотр не позволяет загружать локальные ресурсы.Он отлично работал на Ionic 2. Хотя это не оптимальное решение, я вставляю решение, которое работало для меня.

ionic cordova plugins rm cordova-plugin-ionic-webview
ionic cordova plugins add cordova-plugin-ionic-webview@1.2.1
cordova clean android

И вы можете собрать приложение (ionic cordova build android) и протестировать его.

...