CODEWITHSUNDEEP
androidangularcordovatypescriptionic3
Tamás Polgár
Tamás Polgár

Reputation: 2272

How to display images returned by Cordova PhotoLibrary?

I seem to have trouble displaying images in the Image Gallery on Android. The PhotoLibrary plugin returns the list of files, but when I feed the image URLs to img tags, they don't load.

            window['cordova']['plugins']['photoLibrary'].getLibrary(
                result => console.log(libraryItem),
                err => console.log(err);
                },
                {
                    thumbnailWidth: 512,
                    thumbnailHeight: 384,
                    quality: 0.8,
                    includeAlbumData: true
                });

This will retrieve the URLs to the images, but they can't be used to actually display them. I get things like:

creationDate: Fri Nov 03 2017 20:06:01 GMT-0400 (EDT)
fileName: "2017-10-4-1.jpg"
height: 960
id: "1907;/storage/emulated/0/Pictures/Timelapser/2017-10-4-1.jpg"
latitude: 0
longitude: 0
photoURL: "cdvphotolibrary://photo?photoId=1907%3B%2Fstorage%2Femulated%2F0%2FPictures%2FTimelapser%2F2017-10-4-1.jpg"
thumbnailURL: "cdvphotolibrary://thumbnail?photoId=1907%3B%2Fstorage%2Femulated%2F0%2FPictures%2FTimelapser%2F2017-10-4-1.jpg&width=512&height=384&quality=0.8"
width: 1280

Feeding photoURL or thumbnailURL to img src doesn't work. I tried to decodeURI them, use the part before or after the ; and nothing.

Upvotes: 2

Views: 913

Answers (1)

Sampath
Sampath

Reputation: 65920

You need to use Native Photo Library plugin and cdvphotolibrary pipe as shown below.

Here is working Git project

html

<ion-grid no-padding margin-top>
    <ion-row class="row">
      <ion-col col-6 *ngFor="let data of library">
        <img [src]="data?.thumbnailURL | cdvPhotoLibrary">
      </ion-col>
    </ion-row>
  </ion-grid>

ts

  //fetch Photos
  fetchPhotos() {
    this.platform.ready().then(() => {
      this.library = [];

      this.photoLibrary.getLibrary({ thumbnailWidth: THUMBNAIL_WIDTH, thumbnailHeight: THUMBNAIL_HEIGHT }).subscribe({
        next: (chunk) => {
          this.library = this.library.concat(chunk);
          this.cd.detectChanges();
        },
        error: (err: string) => {
          if (err.startsWith('Permission')) {
            this.platform.ready().then(() => {
              this.photoLibrary.requestAuthorization({ read: true })
                .then(() => {
                }).catch((err) => {
                  let message = 'requestAuthorization error: ${err}';
                  this.showToast.showErrorToast(message);
                });
            });
          } else { // Real error
            let message: 'getLibrary error: ${err}';
            this.showToast.showErrorToast(message);
          }
        },
        complete: () => {
          // Library completely loaded
        }
      });
    });
  }

cdv-photo-library.ts (pipe)

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'cdvPhotoLibrary',
})
export class CdvPhotoLibraryPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(url: string) {
    if (url != null) {
      return url.startsWith('cdvphotolibrary://') ? this.sanitizer.bypassSecurityTrustUrl(url) : url;
    }
  }
}

Upvotes: 4

Related Questions