How to get an image that is saved in the photo library of the Android system?

Question

I am trying to get the Android system photo library to get the image. I have an imageURI variable provided by the navigator.camera.getPicture function. This is normal until then. But later I want to access the photo library and take the base64 code of this image.

Since it is not possible that navigator.camera.getPicture returns both data (imageURI and imageData), I need to get base64 information later. Here is the code I tried to use while looking at the “file” phoneGap documentation, but it doesn’t work.

It stops when you call "fileSystem.root.getFile" - (Error in the error callback: File4 = TypeError: The result of the expression "evt.target" [undefined] is not an object. In the file: ///android_asset/www/phonegap-1.3 .0.js: 717)

Who can help me? Thanks.

function base64(imageURI) { alert(imageURI); document.addEventListener("deviceready", onDeviceReady); function onDeviceReady() { window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);} function gotFS(fileSystem) { alert("filesystem"); //Next line causes error. Perhaps imageURI is not a valid path? fileSystem.root.getFile(**imageURI**, null, gotFileEntry, fail);} function gotFileEntry(fileEntry) { alert("gotfileentry"); fileEntry.file(gotFile, fail);} function gotFile(file){ alert("got file"); readDataUrl(file);} function readDataUrl(file) { alert("readDataURL"); var reader = new FileReader(); reader.onloadend = function(evt) { console.log("Read as data URL"); alert(evt.target.result); }; reader.readAsDataURL(file); } function fail(evt) { console.log(evt.target.error.code);}} 

Answer 1

Well, the first problem is that the object returned by your fail function does not have the property you are trying to access. To find out what is in the error object, try the following:

  function fail(evt) { alert("there was an error: " + JSON.stringify(evt)); } 

Let us know what it produces ...

Answer 2

I don't know why you need getPicture to return both a URI and a Data.

If you need to display an image, you can ask getPicture to return the data to base 64:

  function capturePhoto(){ navigator.camera.getPicture( addPictureToActuSuccess, addPictureToActuFail, { quality: 50, destinationType: navigator.camera.DestinationType.DATA_URL, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY } ); } function addPictureToActuSuccess(data){ // Store the base64 data in a file or in a variable } function addPictureToActuFail(error){ console.log(error); } 

and display it with css:

 url('data:image/png;base64,BASE64_DATA') /* From where you stored you base64 data */ 

Thus, you can also save base 64 data and display an image

Answer 3

I found that imageURI returned from the API must be removed from the file protocol:

 var rf=app.profile.customer.site.imageURI.substring(16); // strip off file://localhost var reader=new FileReader(); reader.onloadend=function(evt){ // the image data is in : evt.target.result // it starts with: data:image/jpeg;base64,/9j/.... // so you may need to strip off the first 24 chars } reader.readAsDataURL(rf); 

Also, as stated above, you do not need to do the FileSystem / FileEntry / File thing; you can just create a FileReader, since you have a full URI.

This worked for me on iOS. I will be testing Android soon and will return my results.