Base64 String is not complete

Question

I have this snippet that captures a photo from a camera and output it in a base64 string.

function onPhotoDataSuccess(imageData) {
  console.log("Image Data: "+imageData);

  var smallImage = document.getElementById('smallImage');
  smallImage.style.display = 'block';

  smallImage.src = "data:image/jpeg;base64," + imageData;
  console.log("Src:" + smallImage.src);
}

When I look at the console log, the first log Image Data isn't complete, but the second Src log is longer.

Here is the log for Image Data:

09-18 17:00:24.591: D/CordovaLog(12097):
file:///android_asset/www/upload.html: Line 57 :
Image Data: /9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkz

And for the Src I'm getting (You can decode it as well, nothing interesting):

09-18 17:00:24.630: D/CordovaLog(12097):
file:///android_asset/www/upload.html: Line 71 :
Src:data:image/jpeg;base64,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

You can see by using the same variable imageData in both logs, I can't get the result to be the same. And, if you decode the base64 string in Src, the image isn't complete.

Anyone know how to fix this?

EDIT: jsfiddle showing the decoding of the base64

EDIT: <img> tag inside HTML body:

<img style="display:none;width:300px" id="smallImage" src="" />

Answer 1

I would suggest you to use destination type as FILE_URI and get the base64 from the method described below

Setting destination type as FILe-URI is the recommended approach as you can see it in their docs

http://docs.phonegap.com/en/2.5.0/cordova_camera_camera.md.html

Specify Destination Type as FILE_URI itself and in imagedata you will be getting the images file uri place it in a image tag and then place it inside HTML5 canvas and canvas has one method called toDataURL where you will be able to get the base64 of the corresponding image.

check the below code

function onPhotoDataSuccess(imageData)
     {

                var $img = $('<img/>');
                $img.attr('src', imageData);
                $img.css({position: 'absolute', left: '0px', top: '-999999em', maxWidth: 'none', width: 'auto', height: 'auto'});
                $img.bind('load', function() 
                {
                    var canvas = document.createElement("canvas");
                    canvas.width = $img.width();
                    canvas.height = $img.height();
                    var ctx = canvas.getContext('2d');
                    ctx.drawImage($img[0], 0, 0);
                    var dataUri = canvas.toDataURL('image/png');

                });
                $img.bind('error', function() 
                {
                    console.log('Couldnt convert photo to data URI');
                });

    }