how to convert to base 64 and DATA URI.

controller $scope.PhotoData = []; $scope.choosePhotos = function () { var options = { maximumImagesCount: 10, quality: 80, targetWidth: 1000, targetHeight: 1000, };

$cordovaImagePicker.getPictures(options).then(function (results) {
for (var i = 0; i < results.length; i++) {
$scope.PhotoData.push(results[i]);
console.log(results[i]);
        }
    if(!$scope.$$phase) {
      $scope.$apply();
      }
        }, function (err) {
                    // An error occured. Show a message to the user
                });
                };

view code ion-slide ng-repeat=“item in PhotoData” img ng-src=“data:image/jpg;base64,{{item}}” style=“max-width: 100%”

[tomercagan]

You can use FileReader:

function processImage(file) {
    fileReader = new FileReader();
    fileReader.onload = onload;
    fileReader.onprogress = progress;
    resolveFile(file).then(function(actualFile) {
        fileReader.readAsBinaryString(actualFile);
    });
}

var resolveFile = function(entry) {
    var deferred = $q.defer();
    // first convert to local file system URL
    window.resolveLocalFileSystemURL(entry, function(fileEntry) {
        // now read/convert the file to file object.
        fileEntry.file(function(file) {
            console.log("File converted to file entry");
            deferred.resolve(file);
        }, function(err) {
            console.log("Failed to convert to file entry", err);
            deferred.reject(err);
        });
    }, function(err) {
        console.log("Failed to resolve to file URL", err);
        deferred.reject(err);
    });

    return deferred.promise;
};

var onload = function (evt) {
    var encoded = window.btoa(evt.target.result);
    // now encoded contains the base64 image.
    // note it is without the "header"
    // img.src = "data:image/jpeg;base64," + encoded
};

Initially I tried to use fileReader.readAsDataURL(actualFile); which give you the base64 data in one shot but it resulted in corrupt images. A workaround was suggested with readAsBinaryString() and then window.btoa() and solved it. See SO question here.

[urbanmania]

yes, this works, but the problem with is it you take for example a compressed jpeg and convert it to an uncompressed png, resulting in a double the size of the file or more.