7

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?

Revathy Durairajan
  • 494
  • 1
  • 5
  • 15

6 Answers6

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

gen_Eric
  • 223,194
  • 41
  • 299
  • 337
Revathy Durairajan
  • 494
  • 1
  • 5
  • 15
  • I don't think this actually works. Doesn't the image load *asynchronously*? Won't it return before the image is loaded? – gen_Eric Jan 11 '13 at 20:46
  • Yes... I had the same issue. You have to store the base64 string in some hidden text box and submit it whenever you want. – Revathy Durairajan Feb 20 '13 at 13:18
  • @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. – Saurabh Android May 01 '14 at 10:47
  • @RevathyDurairajan how can i save dataURL of each image in textbox. Can you please explain this looping via example. Thanks in advance – Saurabh Android May 01 '14 at 10:48
4

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.

Simon MacDonald
  • 23,253
  • 5
  • 58
  • 74
  • 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? – Revathy Durairajan Jun 26 '12 at 06:34
  • That isn't what you asked in your question. Please go back and edit the question for clarity. – Simon MacDonald Jun 26 '12 at 15:49
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);
Ruchit Rami
  • 2,273
  • 4
  • 28
  • 53
Awais Rai
  • 21
  • 3
0

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

Hazem Hagrass
  • 9,329
  • 10
  • 32
  • 54
0

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";
};
StartCoding
  • 394
  • 5
  • 16
0

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.

Brian
  • 21
  • 4