CODEWITHSUNDEEP
javascriptcordovacameraionic-frameworkbase64
ganesh
ganesh

Reputation: 899

convert camera capture image to base64 - Ionic

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.

Upvotes: 2

Views: 11929

Answers (3)

Damien
Damien

Reputation: 593

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

Upvotes: 1

TheBigLignowski
TheBigLignowski

Reputation: 439

The problem is (probably) the line: 

img.crossOrigin = 'Anonymous';

This doc explains that the method toDataUrl() will not work on a 'tainted canvas'. A canvas is tainted when you set crossOrigin to 'Anonymous'.

I haven't tested this theory. Just read the doc.

Upvotes: 0

Sarantis Tofas
Sarantis Tofas

Reputation: 5167

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
});

Upvotes: 8

Related Questions