Using PhoneGap, How to get base64 image data of th

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?

Answer 1

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.

Answer 2

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);

Answer 3

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

Answer 4

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 :-)

Answer 5

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.

Answer 6

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";
};