Display Image from Gallery

2
votes

I have an app that allows a user to select a photo from the gallery or take a photo via camera. I am trying to display an image that was taken via camera and it works fine, it returns a file path like

file:///Users/ray/Library/Developer/CoreSimulator/Devices/C8202B3B-300B-4819-8CD3-4C4AA690CE7C/ data/Applications/D82BF64E-6DD1-4645-B637-BCF65001FD29/tmp/cdv_photo_003.jpg

but when I try to select a photo from a gallery it shows a broken image thumbnail, and it turns a file path like.

content://com.android.providers.media.documents/document/image%3A21

Ionic CLI Version: PRO 4.2.1

Cordova Verion: 8.0.0

NPM Version: 6.4.1

Node.js version: 8.11.3

Platform: Android

I've also tried searching for a solution but it didn't work or I am still doing something wrong

Some of them suggests using this code

if (imageURI.substring(0,21)=="content://com.android") {
  photo_split=imageURI.split("%3A");
  imageURI="content://media/external/images/media/"+photo_split[1];
}

but this solution is not that robust cause not all of the image sources returns the same file path that contains 'content://com.android' like the photos that came from Google Photos which returns 'content://com.google.android'

_Some of them also suggests using DATA_URL on destination type but it is memory intensive and may cause the app to crash_

Here is my code:

TS file

selectImage(sourceType) {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      saveToPhotoAlbum: true,
      sourceType: sourceType
    }

    this.camera.getPicture(options).then((imageData) => {
     let base64Image = 'data:image/jpeg;base64,' + imageData;
     this.imagePreview = imageData;
    }, (err) => {
      this.toastCtrl.presentToast(err);
    });
  }

HTML File

<img src="{{imagePreview}}" />;

I hope someone could help me with this. Thank you in advance ????.

4
ionic-frameworkionic3cordova-pluginshybrid-mobile-appionic-native
use PhotoLibrary of ionic to get picture from gallery - Kajol Chaudhary
Hello @KajolChaudhary. I'll give it a try and let you know the result afterward. Thank you for your suggestion 😊 - Oliver Primo
Do you know base64? - Khurshid Ansari
@KhurshidAnsari, are you pertaining to the base64 native plugin of ionic? - Oliver Primo

4 Answers

0
votes

ts: 

public base64Image:string; 
public getImage(){
const options: CameraOptions = {
  quality: 100,
  destinationType: this.camera.DestinationType.DATA_URL,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE
}

this.camera.getPicture(options).then((imageData) => {
 this.base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
 // Handle error
});
}

html: 

<imge src={{base64Image}} />
0
votes

Give this a try:-

   //From Gallery
     ChooseGallery() {
        var _self=this;
        const options: CameraOptions = {
          allowEdit: true,
          correctOrientation: true,
          quality: 100, // picture quality
          destinationType: this.camera.DestinationType.FILE_URI,
          encodingType: this.camera.EncodingType.JPEG,
          sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM
        }
        this.camera.getPicture(options).then((ImageData) => {
          _self.base64value = ImageData;
        })
      }

From Camera

  ChooseCamera() {
    var _self=this;
    const options: CameraOptions = {
      allowEdit: true,
      correctOrientation: true,
      quality: 100, // picture quality
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }
    this.camera.getPicture(options).then((ImageData) => {
      _self.base64value =  ImageData;
    })
  }

I hope this helps! Thanks!

0
votes
let options: CameraOptions = {
  quality: 100,
  sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM,
  saveToPhotoAlbum: true,
  correctOrientation: true,
  encodingType: this.camera.EncodingType.JPEG,
  destinationType: this.camera.DestinationType.FILE_URI
};

this.camera.getPicture(options).then((imageData) => {
  let photo_split=imageData.split("%3A");
  let photo_split2=photo_split[0].split("?");
  let filename = photo_split2[0].substring(photo_split2[0].lastIndexOf('/')+1);
  let path =  photo_split2[0].substring(0,photo_split2[0].lastIndexOf('/')+1);

  alert(photo_split2[0])
  alert(filename)
  alert(path)
  this.file.readAsDataURL(path, filename).then(res=> {
    alert("FUNCIONA!")
    this.imageURI = res;
  }).catch((reason) => {
    alert(JSON.stringify(reason));
  });
}).catch((reason) => {
  alert(JSON.stringify(reason));
});

//HTML

    <img alt="uploaded Image" [src]="imageURI">