Get image from gallery

Ionic Framework ionic-v3
1

How can get image from gallery on device and show on app ? thanks for any solutions

2 
ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera

openGallery () {
 let cameraOptions = {
   sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
   destinationType: Camera.DestinationType.FILE_URI,      
   quality: 100,
   targetWidth: 1000,
   targetHeight: 1000,
   encodingType: Camera.EncodingType.JPEG,      
   correctOrientation: true
 }

 Camera.getPicture(cameraOptions)
   .then(file_uri => this.imageSrc = file_uri,
   err => console.log(err));  
}

This will help you.
For more detail visit https://ionicframework.com/docs/native/camera/ this.

1 Like
3

thanks you i will try letter

4

hello . if flow your way we will open camere and take a picture . But i dont need take a photo i just want get all picture in gallery . thanks for your answer

1 Like
5

Hello.

I used the Photo Library to search all the photos and by id I could find the ones that were from the album that I wanted.

6

Cheers in my App the user has the choice to both take a photo, but also select one from the gallery, and both of those options return a base64 which then I keep in the database, this is how I do it:

TAKE PHOTO

  async takePhoto() {
    const options: CameraOptions = {
      quality: 100,
      targetHeight: 300,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      saveToPhotoAlbum: true,
      allowEdit: true
    }

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

      // now you can do whatever you want with the base64Image, I chose to update the db
      this.authenticationService.utilizador.avatar = base64Image;
      this.utilizadorService.update(this.authenticationService.utilizador);

    }, (err) => {
      // Handle error
    });

    await this.modalController.dismiss();
  }

GET PHOTO

  async getPhoto(sourceType:number) {
    const options: CameraOptions = {
      quality: 100,
      targetHeight: 300,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      sourceType: sourceType,
      saveToPhotoAlbum: false,
      allowEdit: true
    }

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

      // now you can do whatever you want with the base64Image, I chose to update the db
      this.authenticationService.utilizador.avatar = base64Image;
      this.utilizadorService.update(this.authenticationService.utilizador);

    }, (err) => {
      // Handle error
    });

    await this.modalController.dismiss();
  }

image

PS: after taking or selecting a photo you’re going to CROP it, if you wanna disable that, put allowEdit: false

PS: as I said, this returns the photo as a base64 which means it’s literally a huge string that will create your image anywhere you use it, mine usually weight around 300kb to 350kb each and then I keep them in the database, but that may not be what you want, if you want to directly reference an image by ID in the library and use it in your app, that’s different.

2 Likes