Cordova Image Picker convert to base64

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?