Cordova Image Picker convert to base64

Question

I am having trouble converting an image to base64 format that has been selected using the ngCordova imagePicker .

To keep things simple, the code provided on the Cordova site (which works) is this:

module.controller('ThisCtrl', function($scope, $cordovaImagePicker) {

  var options = {
   maximumImagesCount: 10,
   width: 800,
   height: 800,
   quality: 80
  };

  $cordovaImagePicker.getPictures(options)
    .then(function (results) {
     for (var i = 0; i < results.length; i++) {
    console.log('Image URI: ' + results[i]);
  }
}, function(error) {
  // error getting photos
});
});

The results array returns an array of results like: file///... but how to convert from here? I would like a function that you pass in a value to (the file) and returns the base64 string.

Here is a function that attempts this:

function convertImgToBase64URL(url, callback, outputFormat){

        var canvas = document.createElement('CANVAS'),
            ctx = canvas.getContext('2d'),
            img = new Image();
        img.crossOrigin = 'Anonymous';
        img.onload = function(){
            var dataURL;
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0);
            dataURL = canvas.toDataURL(outputFormat);
            callback(dataURL);
            canvas = null; 
        };
        img.src = url;
    };

But how to integrate it into the code?

I have tried this (only need to pick one image):

$cordovaImagePicker.getPictures(options)
                .then(function (results) {
                    convertImgToBase64URL(results[0], function(base64Img){

                        self.chosenImage = base64Img;                                
                    });                          

             }, function(error) {
                console.log(error);
             }); 

but self.chosenImage gets set to blank.

Might be an async issue but how best to resolve it?

Answer 1

Could you use $cordovaCamera and change the sourceType to Camera.PictureSourceType.PHOTOLIBRARY ?

document.addEventListener("deviceready", function () {

    var options = {
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
      allowEdit: true,
      encodingType: Camera.EncodingType.JPEG,
      targetWidth: 100,
      targetHeight: 100,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: false
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
      var image = document.getElementById('myImage');
      image.src = "data:image/jpeg;base64," + imageData;
    }, function(err) {
      // error
    });

  }, false);

Answer 2

Interestingly, the ngCordova ImagePicker does not have the function to convert a picture to base64. However, the ngCordova $cordovaCamera function does, albeit only for immediately captured photos.

Here the equivalent options would be

 var options = {
  quality: 80,
  destinationType: Camera.DestinationType.DATA_URL,
  sourceType: Camera.PictureSourceType.CAMERA,
  allowEdit: true,
  encodingType: Camera.EncodingType.JPEG,
  targetWidth: 800,
  targetHeight: 800,
  popoverOptions: CameraPopoverOptions,
  saveToPhotoAlbum: false
};

Source: http://ngcordova.com/docs/plugins/camera/

Answer 3

This is an old question, but I think the main request is not answered although the alternative proposal is great. So just to point out a method that follows the suggested way, you could use this Base64 plugin .

Install it as usual

cordova plugin add https://github.com/hazemhagrass/phonegap-base64

and use it within the $cordovaImagePicker.getPictures success callback

$cordovaImagePicker.getPictures(options)
        .then(function (results) {
            for (var i = 0; i < results.length; i++) {
                console.log('Image URI: ' + results[i]);
                $scope.imageUri = results[i];

               // Encode URI to Base64
               window.plugins.Base64.encodeFile($scope.imageUri, function(base64){
                  // Save images in Base64
                  $scope.images.push(base64);
               });
            }

        }, function(error) {
            // error getting photos
        });

Answer 4

If you just want transfer image to serve, you haven't do this. You can use fileTransferPlugin. Hope this will hepl you.