Get Base64 from imageURI using PhoneGap

Question

I am trying to get base64 from an image selected from an album on my phone, but I cannot get it to 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 displays correctly .. I get an error from this function:

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

And error: FileError.ENCODING_ERR

I know that the code does not look very nice. But I do not know how to get Base64 encoding from imageURI.

Answer 1

I found a solution in google groups . I changed it a 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 use Base64 encoding.

Answer 2

The above method from SERPRO works ... but I need to change

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

So the line

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

can be deleted, and base64 result can be directly extracted as

 image64.value = evt.target.result; 

Answer 3

The cordova-plugin file implements the HTML5 File API and uses the callback API. 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 specified by Blob or File. When the read operation is complete, readyState becomes PERFECT, and the loadend function is started. At this time, the result attribute contains data in the form of a URL representing the files as a base64 encoded string.

Using:

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