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 = "";
      convertImgToDataURLviaCanvas(imageUrl, function(base64Img) {
      var result = convertImgToDataURLviaCanvas(imageURI);
  }, function(err) {
  }, {
      quality: 75,
      targetWidth: 320,
      targetHeight: 320,
      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);
    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.


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

Answered By – Sarantis Tofas

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published