Search code examples
javascriptcordovacameraionic-frameworkbase64

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.


Solution

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