How encode images as base64 from ngCordova camera

ionic-v1
1

Im using the ngCordova camera API and sending an image up to an image recognition service. This needs to be sent as FILE_URI. But then after it has been sent, I need to convert it to base64 to store it somewhere else.

Im having trouble doing so, I tried using the FileReader - but that doesnt seem to work.

I just tried attached two functions to ng-click, but it only fires the camera once. Im stuck and not sure what else to do!

2

Hey there! It’s hard to tell exactly what could be going wrong, but it sounds like you’re trying to do something like this at a high level:

    $cordovaCamera.getPicture(options)
      .then(function(imageData){
        // send image to third party image service
       return imageData
      })
      .then(function(imageData){
        // image was sent to third party service
        // convert to base64 and save
      });

From here, you can actually encode images to base64 using html5 canvas - no server required. Here’s a post that shows how this is done. If you’re still working through this, perhaps you could upload your code to codepen and I can check it out?

2 Likes
3

Thanks drew, this is a great help! I forgot about the promises that I can chain them!

I guess Im suck on how to use html5 canvas to convert my image to base64. I will do some research and see what I can come up with.

I will post my code if I get stuck and maybe you can point me in the right direction?

4

Ok - so it’s working with the example that you sent over, but when I try to pass in imageData - it doesnt work.

My code is below - any ideas?

$scope.getPicture = function() {

        pictureSource = navigator.camera.PictureSourceType.PHOTOLIBRARY;
        destinationType = navigator.camera.DestinationType.FILE_URI;

        var options = { 
          destinationType: destinationType,
          sourceType: pictureSource,
          encodingType: 0,
        };

        $cordovaCamera.getPicture(options)
        .then(function(imageData){
          // send image to third party image service
          }

          return imageData;
        })
        .then(function(imageData){
          // image was sent to third party service
          // convert to base64 and save

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

          convertImgToBase64(imageData, function(base64Img){
              // Base64DataURL
              console.log('converted',base64Img);
          });

        });

      }

It looks like I’ll need to use FileReader - not sure if this is possible and I’ve hit a snag!

5

Hi, I have the similar issue. Kindly checkout this link http://stackoverflow.com/questions/34987693/convert-camera-capture-image-to-base64-ionic and help me in solving!