convert camera capture image to base64 - Ionic

Question

I have followed this fiddler example Image to Base64. Its working fine when I use the direct image path link, but it failed when I pass camera image.

   Camera.getPicture().then(function(imageURI) {
      var imageUrl = "http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png";
      convertImgToDataURLviaCanvas(imageUrl, function(base64Img) {
          alert(base64Img);
      });
      var result = convertImgToDataURLviaCanvas(imageURI);
  }, function(err) {
      alert(err);
  }, {
      quality: 75,
      targetWidth: 320,
      targetHeight: 320,
      pictureSource: navigator.camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: navigator.camera.DestinationType.FILE_URI,
      saveToPhotoAlbum: true
  });



function convertImgToDataURLviaCanvas(url, callback, outputFormat) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.height;
    canvas.width = this.width;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    alert(dataURL + "GANESH" + outputFormat);
    callback(dataURL);
    alert('5');
    canvas = null;
};
img.src = url;

}

Here, If I give the direct path of image its working but its not working when I use camera image. Help me guys.. thanks in advance.

Solution 1

There is no need to write your own base64 converter. The plugin will do it for you once you set the property Camera.DestinationType.DATA_URL

destinationType : Camera.DestinationType.DATA_URL

After setting the property, Camera.getPicture() will now return a base64 version of the photo.

Camera.getPicture().then(function(imageURI) {
  console.log(imageURI) //base64 photo
});

Solution 2

While I agree that using DATA_URL is the simplest answer, it does have a major drawback. From the cordova-plugin-camera docs which the ionic camera is based on:

DATA_URL can be very memory intensive and cause app crashes or out of memory errors. Use FILE_URI or NATIVE_URI if possible

Essentially, on phones with low RAM (or high background memory usage) there is a chance that your app is killed and restarted during garbage collection since it's technically in the background (paused) when the native camera is opened.

However, avoiding DATA_URL is more of a bandaid since other data sources are still susceptible to the same problem, albeit less so due to lower memory usage. The cordova documentation on Android lifecycles provides more details on the issue:

https://cordova.apache.org/docs/en/latest/guide/platforms/android/#lifecycle-guide

Comments

[ganesh]

Thanks for the reply. so i dont want to use convertImgToDataURLviaCanvas function?

[Sarantis Tofas]

@ganesh yes exactly, there is no point in doing that since the Camera plugin will return a base64 string for you if and only if you set the destinationType : Camera.DestinationType.DATA_URL

[Missak Boyajian]

do you have any idea how to convert the Data_Url to file? Since I want to send it with XMLHttpRequest

[Sarantis Tofas]

@MissakBoyajian use Camera.DestinationType.FILE_URI or Camera.DestinationType.NATIVE_URI instead