0

Cordova Image Picker convert to base64

Previously I had written a post regarding how to Accessing Image Gallery using Ionic and ngCordova plugin in an Ionic Framework application.  This previous post was continue to converting an image to base64 format that has been selected using the ngCordova imagePicker.

ResolveLocalFileSystemURI

This object provides a way to obtain root file systems. Retrieve a DirectoryEntry or FileEntry using local URI. (Function)

function onSuccess(fileEntry) {
    console.log(fileEntry.name);
}

window.resolveLocalFileSystemURI("file:///example.txt", onSuccess, onError);

Development

At this point, you should have everything set up and ready, we can start working on our example. If you’re using Cordova 4+ you will need to check if there’s a Whitelist plugin installed with your project. If you have it, add this security meta tag img-src * 'self' data: https:;  to your index.html HEAD content:

<meta http-equiv="Content-Security-Policy" content="default-src *; img-src * 'self' data: https:; script-src &apos; self&apos; &apos; unsafe-inline&apos; &apos; unsafe-eval&apos; *; style-src &apos; self&apos; &apos;unsafe-inline&apos; *">

Without it your application will throw an error during the app initialization, after that it will constantly throwing no security meta-tag found. While not a blocking point, constant console log warnings will make it hard to do any debugging.

 

ngCordova imagePicker returns an URI not the image data. Here’s the code that should do what you want:

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

        window.resolveLocalFileSystemURI(results[i],
            function (fileEntry) {
                
                //Convert to Base64 string
                fileEntry.file(
                    function(file) {
                        //got file
                        var reader = new FileReader();
                        reader.onloadend = function (evt) {
                            var picData = evt.target.result; // this is your Base64 string
                        };
                        reader.readAsDataURL(file);
                    }, 
                function (evt) { 
                    //failed to get file
                });
            },
        );
      }
    }, 
    function(error) {
    // error getting photos
    }
);

HTML

Application main page.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="Content-Security-Policy" content="default-src *; img-src * 'self' data: https:; script-src &apos; self&apos; &apos; unsafe-inline&apos; &apos; unsafe-eval&apos; *; style-src &apos; self&apos; &apos;unsafe-inline&apos; *">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"/>
        <title></title>
 
        <link href="lib/ionic/css/ionic.css" rel="stylesheet"/>
        <link href="css/style.css" rel="stylesheet"/>
 
        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>
 
        <!-- cordova script (this will be a 404 during development) -->
        <script src="js/ng-cordova.min.js"></script>    
        <script src="cordova.js"></script>
 
        <!-- your app's js -->
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
 
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Image Picker</h1>
            </ion-header-bar>
            <ion-content ng-controller="ImagePickerController">
                <button class="button button-full button-positive" ng-click="selectImage()">
                    Select Image
                </button>
                <img ng-src="{{picData}}" style="width:100%; height: auto;"/>
            </ion-content>
        </ion-pane>
 
    </body>
</html>

Output:

image picker - ngCordova

 

Prakash S

Prakash S

I would like to introduce myself as a Software professional opting for the career in software industry. I'm Prakash S, a MCA graduate and trained as industry level practice for Software technology. Basically I am a PHP Developer but now days exploring more in HTML5, CSS, AngularJS and jQuery libraries.