terikon / cordova-plugin-photo-library

Maintainer needed. Please contact if you're using this library in your project
MIT License
149 stars 295 forks source link

How to Display getThumbnail blob in html - IONIC #167

Open Shtibel opened 5 years ago

Shtibel commented 5 years ago

Trying to show Thumbnail in IONIC here is my code:

if(this.platform.is('cordova')){
  this.library = [];

  this.photoLibrary.getLibrary({
    includeAlbumData: true,
    quality: 1.0,
    thumbnailWidth: 100,
    thumbnailHeight: 100,
    itemsInChunk: 100,
    chunkTimeSec: 0.5,
    useOriginalFileNames: false,
    includeVideos: false,
    maxItems: 200
  }).subscribe({
    next: (chunk) => {
      this.library = this.library.concat(chunk);
      this.library.forEach(image => {

        this.photoLibrary.getThumbnail(image, {
          quality: 0.5,
          thumbnailHeight: 100,
          thumbnailWidth: 100,
        }).then((blob)=>{
          let dataURI;
          let reader = new FileReader();
          reader.onload = ()=>{
            dataURI = reader.result;
            var base64 = dataURI.replace(/^data:image\/(png|jpg);base64,/, "");
          };
          let data = reader.readAsDataURL(blob);

          console.log('data: ', data);
          this.albumImages.push({
            //url: this.getImgContent(image.thumbnailURL)
            url: data
          });            

        })
      });
    },
    error: err => { console.log('could not get photos'); },
    complete: () => { 
      console.log('done getting photos: ', this.albumImages); }
  });  
}

And HTML

<img *ngFor="let image of albumImages" [src]="image.url">

But I get: data: undefined

What am I doing wrong ?