How to resize $cordovaCapture.captureImage image before upload to server?

Question

I use my phone to capture an image in my Ioinc App using $cordovaCapture.captureImage like so:

$cordovaCapture.captureImage(options).then(function(imageData) {

               var imagePath = "file://" + imageData[0].fullPath;
               console.log (imagePath);

                Utils.getBase64ImageFromInput(imagePath, function(err, base64Img) {

                    //Process the image string. 
                    $scope.myprofile.profilepic = base64Img;
                    $scope.myprofile.$save().then(function() {
                      console.log ("Save Avatar Image Successful!")
                    }, function(error) {
                      console.log("Error:", error);
                    });
                    Loader.hide();
                });
            }, function(err) {
                console.log(err);
                Loader.hide();
            });

The Utils.getBase64ImageFromInput service is like so:

getBase64ImageFromInput: function(input, callback) {
      window.resolveLocalFileSystemURL(input, function(fileEntry) {
          fileEntry.file(function(file) {
                  var reader = new FileReader();
                  reader.onloadend = function(evt) {
                      callback(null, evt.target.result);
                  };
                  reader.readAsDataURL(file);
              },
              function() {
                  callback('failed', null);
              });
      },
      function() {
          callback('failed', null);
      });
    }

It works nicely. But the problem is the image is way to big from my iPhone capture. I want to limit the size to 200x200 and quality to maybe 0.8 jpg. But I do not find any options setting in the ngCordova doc to do just that. How can I resize the base64 image and optimized it before I update onto my Firebase server?

Answer 1

This plugin does not have taget width and height options. So i would advise you to use cordova camera plugin. Usualy camera plugin is used more often than capture plugin for image related requirements. Here is link to plugin: http://ngcordova.com/docs/plugins/camera/ . As you can see it has more set of options like target width and height (means what size you need after image is captured), library or direct camera, quality , encoding type , crop etc.Here is set of options

var options = {
      quality: 50, //0-100
      destinationType: Camera.DestinationType.DATA_URL, //DATA_URL (returns base 64) or FILE_URI (returns image path)
      sourceType: Camera.PictureSourceType.CAMERA,
      allowEdit: true, //allow cropping
      encodingType: Camera.EncodingType.JPEG,
      targetWidth: 100, //what widht you want after capaturing
      targetHeight: 100,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: false
    };
$cordovaCamera.getPicture(options).then(function(imageData) {
      var image = document.getElementById('myImage');
      image.src = "data:image/jpeg;base64," + imageData;
    }, function(err) {
      // error
    });

See this link to learn all options available.