Image picker give base64 of image or not?

Ionic Framework ionic-v3
1

Hai,

i am using Image picker plugin but i am not sure image picker give base64 of image ,
i gone through the link https://github.com/Telerik-Verified-Plugins/ImagePicker , here the document says

"window.imagePicker.OutputType.FILE_URI (0) or
// window.imagePicker.OutputType.BASE64_STRING (1)
outputType: int "

but in ionic document they mentioned only Output type, defaults to 0 (FILE_URI). (optional)

please help me with this…

2

I found that plugin buggy as hell, sometimes crashing my app inexplicably. Any chance you can use the Camera plugin instead?

3

In camera plugin we can pick only one image but in my application i have to pick multiple images

may i know how to work in image picker

please help me this.

4

hello there,
have you found a solution to your problem? I am stuck at the moment

5

Hai,

yes i found answer ,Image picker give base64 image and it working perfectly

6

oh great!
Would you be able to answer the question you asked at the beginning of the thread?
How do you get to choose the output type as base64?
Sorry it s still not obvious to me…
thanks

7

how do you get it to convert to base64? the outputType seems to be ignored

8

const options = {
maximumImagesCount: 5,
quality: 50,
width: 512,
height: 512,
outputType: 1
}

this.imagePicker.getPictures(options).then((results) => {
for (var i = 0; i < results.length; i++) {
this.photo[i] = results[i];
this.base64Img[i] = ‘data:image/jpeg;base64,’ + results[i];
console.log(this.base64Img);
console.log(this.photo);
}
}, (err) => {
console.log(‘err’ + err);
});

9

does this code work work you?
I tried, but even I set outputType to 1, it still store the file uri in the results.

1 Like
10

yes the above code is work for me and its give base64 only, use the same code

results[i] give raw base64 and ‘data:image/jpeg;base64,’ + results[i] allow to display image in tag

1 Like
11

Hi, any update about this, me too I specify b64 (OutputType = 1) and it ignores it and gives me a file URI instead. Why?

1 Like
12

An alternative to image-picker is the HTML . Here goes some code:

HTML

<input #fileInput type="file" id="file-input" (change)="onImageLoad($event)" name="files" />

TS

onImageLoad(e){
  var reader = new FileReader();
  let self = this;

 
  let imageFileName = e.target.files[0].name;
  reader.onload = function(e) {
    self.fileData = reader.result; //base64 encoded
    let fileType = self.fileData.substring(self.fileData.indexOf(':')+1,self.fileData.indexOf('/'));;
  }

  reader.readAsDataURL(e.target.files[0]);

}

The downside of this approach is that the user can select files of any type, not only image, but you can check this by getting the file type which is embedded in the encoded data.

Cheers.

13

same issue occurs for my case too.
did you find any other options?

14

not working for me with outputtype 1.
please help

getImgs() {
    this.serviceImgs = [];
    this.imagePicker.getPictures({ maximumImagesCount: 10, quality: 50, height: 210, width: 210, outputType: 1 }).then(results => {
        if(results.length > 0) {
          for (let i = 0; i < results.length; i++) {
            this.serviceImgs.push(results[i]);
          }
          // this.getImageData();
        }
      },
      error => {
        toastOptions.message = "Error getting images...";
        this.toast = this.toastCtrl.create(toastOptions);
        this.toast.present();
        });
  }
15

can you please share your code snippet?

16

can you please provide the version of plugin you used and got it working?

17

“com.synconset.imagepicker”: “2.1.10”,

“@ionic-native/image-picker”: “4.2.0”,

please check the above versions

18

com.synconset.imagepicker 2.1.10 “ImagePicker”,
“@ionic-native/image-picker”: “4.6.0”,

I used above version and got it working.
Thanks a lot :slightly_smiling_face:

19

Hey, try uninsatlling the plugin and add it fresh. It will work.check the plugin version installed.

20

Hello, @Heenavora

please write here command for install below command
com.synconset.imagepicker 2.1.10 “ImagePicker”,