How to take pictures and crop them using ionic fra

Question

Currently I'm developing an ionic-framework-mobile-application and I have the problem to correctly make profile-pictures.

I am using the cordovaCamera-plugin and I have to take pictures with the camera or to use pictures from the library. After getting a picture the user should be able to crop the picture to just upload the part, he wants to.

My javascript- / angular-code to take a picture using the camera looks like this:

$scope.takePicture =  function () {

    var options = {
    quality: 100,
    destinationType: Camera.DestinationType.DATA_URL,
    sourceType: Camera.PictureSourceType.CAMERA,
    allowEdit: true,
    encodingType: Camera.EncodingType.JPEG,
    targetWidth: 500,
    targetHeight: 500,
    popoverOptions: CameraPopoverOptions,
    saveToPhotoAlbum: false,
    correctOrientation: true
  };

  $cordovaCamera.getPicture(options).then(function(imageData) {
    $scope.imgURI = "data:image/jpeg;base64," + imageData;
  }, function(err) {
    // error-handling not done by now
  });

};

If I want to choose a picture from the camera the code looks nearly the same, I just change one line to:

sourceType: Camera.PictureSourceType.PHOTOLIBRARY,

The problem is now, if I set allowEdit: true, I can take pictures from the camera and crop them on an android device, but an iphone is not able to crop the taken / selected pictures.

If I would set allowEdit: false and just get the picture from cordovaCamera to crop it afterwards with an other function, the picture changes the direction on an android device and the option correctOrientation does not work at all.

I could really need some help to get this problem solved.

Kind regards

rholtermann

Answer 1

you have to use $cordovaCamera.getPicture(options) to work for taking a picture or from a library.Here am posting a sample code for camera which worked for me In your controller write the camera code as

$scope.userPic = function(){
            console.log("userPic function got called");
            $ionicPopup.show({
              template: '<p>Take picture or use from library</p>',
              title: 'Choose',
              buttons: [
                {
                  text: '<b>Camera</b>',
                  onTap: function(e) {
                    return "camera";
                  }
                },
                {
                  text: '<b>Library</b>',
                  type: 'button-positive',
                  onTap: function(e) {
                    return "library";
                  }
                },
              ]
            }).then(function(resp) {
              $scope.takePicture(resp);
              console.log('resp', resp);
            });
        }

        $scope.takePicture = function(resp){
            console.log("takePicture function got called");
            console.log(resp);
            var source;
            if (resp == "camera") {
              source = Camera.PictureSourceType.CAMERA;
            }else{
              source = Camera.PictureSourceType.PHOTOLIBRARY;
            };
            var options = {
              quality : 75,
              destinationType : Camera.DestinationType.FILE_URI,
              sourceType : source,
              allowEdit : true,
              encodingType: Camera.EncodingType.JPEG,
              targetWidth: 300,
              targetHeight: 300,
              popoverOptions: CameraPopoverOptions,
              saveToPhotoAlbum: false
            };
             $cordovaCamera.getPicture(options).then(function(imageData) {
                console.log(imageData);
            }, function(err) {
                console.log(err);
                // error
            });
             }

In your HTML write the camera button code as

<button class="button button-bar button-balanced" ng-click="userPic()">
      Camera
    </button>

Answer 2

I had troubles with this plugin too and after looking up on the Internet i found out that the camera plugin property

allowEdit: true

Does not work properly, not returning the cropped image in the promise, but the original (hence not modified) image, check this forum thread

I solved this problem using this plugin alongside with the cordova camera plugin, a pretty neat soluton!