Get Base64 from imageURI with PhoneGap

Question

I'm trying to get the base64 from an image that picked from the album on my phone, but I cannot make it work:

I tried this:

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
    console.log("0");
    fileSystem.root.getFile(imageURI, null, function(fileEntry) {
        console.log("1");
        fileEntry.file(function(file) {
            console.log("2");
            var reader = new FileReader();
            reader.onloadend = function(evt) {
                console.log("Read complete!");
                image64.value = Base64.encode(evt.target.result);
            };
            reader.readAsText(file);
        }, failFile);
    }, failFile);
}, failSystem);

Although the image is displayed correctly.. I receive an error from this function:

fileSystem.root.getFile(imageURI, null, function(fileEntry)

And the error is: FileError.ENCODING_ERR

I know that code doesn't look pretty. But I don't know how to get the Base64 encoding from an imageURI.

hi its easy already give example just ref... this link.. [here](http://stackoverflow.com/questions/20280911/encoding-a-image-to-base64-and-upload-to-web-service-in-phonegap/22910216#22910216) — Kathir, Apr 08 '14 at 07:08

score 7 · Answer 1 · answered Aug 29 '12 at 09:26

The above method from SERPRO works...but i have to change

reader.readAsText(file);
to
reader.readAsDataURL(file);

Thus, line

image64.value = Base64.encode(evt.target.result);

can be removed and the base64 result can be directly extracted as

image64.value = evt.target.result;

SERPRO · Accepted Answer · 2013-01-31T10:02:58.610

7

I found the solution in Google groups. I modified it a little bit and this is the result:

var gotFileEntry = function(fileEntry) { 
    console.log("got image file entry: " +  fileEntry.fullPath); 
    fileEntry.file( function(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read complete!");
            image64.value = Base64.encode(evt.target.result);
        };
        reader.readAsText(file);
    }, failFile);
};

window.resolveLocalFileSystemURI(imageURI, gotFileEntry, failSystem);

NOTE: It takes about 20 seconds to read a normal 5MPixel image and another 10-15 to Base64 encode it.

edited Jan 31 '13 at 10:02

answered Mar 06 '12 at 13:29

SERPRO

10,015
8
46
63

How to get base 64 string value? I want to save base 64 string to sqlite. How to use "image64.value". – B M Feb 10 '15 at 01:56
@BM you can do it like in this question: http://stackoverflow.com/questions/1207190/embedding-base64-images – SERPRO Feb 10 '15 at 10:05

score 1 · Answer 3 · answered Feb 13 '18 at 16:50

The cordova-plugin-file implements the HTML5 File API, and that uses callback API's. I prefer promises so I rewrote the method using the $q library:

function getContentAsBase64(fileUrl) {

  //Using $q to change the API so that getContentAsBase64 returns a promise
  var deferred = $q.defer();

  //function to call when either resolve or retrieval fails
  var fail = function (error) {
    errorHandler(error);
    deferred.reject(error);
  }

  //function to call when resolve file succeeded
  //we have a FileEntry - get the file, 
  var fileResolved = function (fileEntry) {
    fileEntry.file(fileSuccess, fail);
  }

  //function to call when file successfully retrieved
  //convert to base64 string
  var fileSuccess = function (file) {

    var reader = new FileReader();
    reader.onloadend = function (evt) {
      //promise is resolved with the base64 string
      deferred.resolve(evt.target.result);
    };
    reader.readAsDataURL(file);
  };

  window.resolveLocalFileSystemURL(fileUrl, fileResolved, fail);
  return deferred.promise;
}

The readAsDataURL method is used to read the contents of the specified Blob or File. When the read operation is finished, the readyState becomes DONE, and the loadend is triggered.At that time, the result attribute contains the data as a URL representing the file's data as a base64 encoded string.

Usage:

var imageData;
getContentAsBase64(aq.FileUri).then(function (content) {
   imageData= content;
});

@JorhelReyes https://docs.angularjs.org/api/ng/service/$q – Colin Oct 09 '20 at 14:51 — Colin, Oct 09 '20 at 14:51

Get Base64 from imageURI with PhoneGap

3 Answers3