Using PhoneGap, How to get base64 image data of the photo chosen from photo library in iPhone

Question

Using PhoneGap(Cordova), Am trying to get base64 image data of the photo chosen from the photo library.

I could do that.. when the photo is captured from camera, With the below snippet of code in Cordova.

    navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    destinationType: Camera.DestinationType.DATA_URL
 }); 

function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + imageData;
}

function onFail(message) {
    alert('Failed because: ' + message);
}

But, what should i do to get the base64 image data when the photo gets chosen from library?

Gloomy

Answer 1

function encodeImageUri(imageUri)
{
     var c=document.createElement('canvas');
     var ctx=c.getContext("2d");
     var img=new Image();
     img.onload = function(){
       c.width=this.width;
       c.height=this.height;
       ctx.drawImage(img, 0,0);
     };
     img.src=imageUri;
     var dataURL = c.toDataURL("image/jpeg");
     return dataURL;
}

I have no solution in PhoneGap for this. So all I need is the base64 format of the image which has been chosen by user from their photo library. So I placed that image on canvas and toDataUrl() gave me the very format :-)

Gloomy

I don't think this actually works. Doesn't the image load asynchronously? Won't it return before the image is loaded? – Martamartaban

Yes... I had the same issue. You have to store the base64 string in some hidden text box and submit it whenever you want. – Gloomy

@RocketHazmat i am also facing same issue that i get that dataURL after completing the loop but i want at the same time in loop for each image. – Obnoxious

@RevathyDurairajan how can i save dataURL of each image in textbox. Can you please explain this looping via example. Thanks in advance – Obnoxious

Answer 2

You just need to tell it to pick from the photo library:

navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    destinationType: Camera.DestinationType.DATA_URL,
    sourceType : Camera.PictureSourceType.PHOTOLIBRARY
}); 

Please be aware that loading a large base 64 encoded image may just cause and out of memory error in your app. Wherever possible use the FILE_URI to get your photo.

Forefront

Simson.. Yea! The above snippet that you gave will let you choose the photo from library.. But i want to save the cropped image of it to server in Base64 format. All it returns is just the FILEURI... What method should i use to get the BASE64 format of that image? – Gloomy

That isn't what you asked in your question. Please go back and edit the question for clarity. – Forefront

Answer 3

Its the good way to get image in base64 but when is show base64 string returned by this function. It display me a white image. My code is as follows

var smallImage = document.getElementById('smallImage');
                smallImage.src = encodeImageUri(imageURI);

Procurance

Answer 4

You can use this plugin to get you the base64 encoding of the image, it uses js code for iOS, but in case of android it uses native code to handle android versions lower then v.3 because android versions lower then 3 are not handle toDataUrl functionality

Pineal

Answer 5

Try this out.

function getPhoto(source) {
    // Retrieve image file location from specified source
    navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
} 

function onPhotoURISuccess(imageURI) {

    window.resolveLocalFileSystemURI(imageURI, gotFileEntry, failSystem);

}
function onFail(message) {
    alert('Failed because: ' + message);
}
var gotFileEntry = function(fileEntry) {
   // alert(fileEntry.fullPath);
    console.log("got image file entry: " +  fileEntry.fullPath);
//convert all file to base64 formats
    fileEntry.file( function(file) {
//uncomment the code if you need to check image size
       //if(file.size>(1049576/2))
      // {
           //alert('File size exceeds 500kb');
          // return false;
      // }
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read complete!");
            $('yourimageidtoshow').attr('src',  evt.target.result);
        };
        reader.readAsDataURL(file);
    }, failFile);
};
var failSystem=function(){
    console.log('failed');

}
var failFile=function(){

    console.log('failed');
    throw "toobig";
};

Celestinacelestine

Answer 6

Try this one: https://github.com/brianvandelden/acato-service-image. It uses the imagePicker.git cordova plugin. With a function to get the imageData from selected pictures.

Counterglow