Ionic Image Picker

Ionic Native
1

Hi All,

I’m using Ionic 3 and I’m trying to get picture using Image Picker. I want result image with base64 type. So I used " outputType:1 " from ImagePickerOption. But when I use it, it can’t output base64 type. Is there another way to output base64 type??

2

You can use Camera Plugin, set the Camera Options:

public cameraOptions: CameraOptions = {
        sourceType         : this.camera.PictureSourceType.PHOTOLIBRARY,
        destinationType    : this.camera.DestinationType.DATA_URL,
        encodingType       : this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE,
    };

and use the method getPicture( ):

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

That works for me :slight_smile:

3

You need to provide options object like this getPictures(options)

this.imagePicker.getPictures(options).then((results) => {
  for (var i = 0; i < results.length; i++) {
      console.log('Image URI: ' + results[i]);
  }
}, (err) => { });

Snippet taken directly from official docs and it works for me every time,
Plus you need to prefix data received like this

'data:image/jpeg;base64,' + imageData
1 Like
4

Yes.Thanks you.But if I use it, I can’t select multiple images. Can u select multiple images using with cameraOptions??

5

No, I think it is not possible with that plugin…

6

Yeah.Any way thanks for help. :smiley:

1 Like
8

Yeah. I already tried with that. It’s not work for me. Thanks.

9

Is there any way to filter image file type. I only want to accept .jpg.

10

You can look for info here: https://github.com/apache/cordova-plugin-camera#module_Camera

With:
encodingType : this.camera.EncodingType.JPEG,

all pictures selected will return in JPG type.

11

Aww. Oki. Thank you!!

12

I’m sorry I was studying the code and the plugin options accept the title and message parameters. But the ImagePickerOptions object (native index.ts) still does not support it, this does not allow the component to be multi-language.
Any solution?