Cordova Camera Plugin allowEdit cropping not working after taking picture

I’ve got two pretty typical options, take picture and choose picture.

I’m trying to crop to a square image in iOS.

This works well when choosing a picture from the camera roll.

However, after taking a picture with the camera, I can not move the image up and down to crop. I can zoom in and out, but can not adjust up and down.

$scope.takePicture = function() {
  console.log("Getting camera...");
  Camera.getPicture({
    allowEdit : true,
    targetWidth: 300,
    targetHeight: 300
  }).then(function(imageURI) {
    $scope.imageURI = imageURI;
    console.log(imageURI);
  }, function(err) {
    console.log(err);
  });
};

$scope.choosePicture = function() {
 console.log("Getting camera...");
 Camera.getPicture({
   allowEdit : true,
   targetWidth: 300,
   targetHeight: 300,
   sourceType : 0
 }).then(function(imageURI) {
   $scope.imageURI = imageURI;
   console.log(imageURI);
 }, function(err) {
   console.log(err);
 });
};

Hi mate,

Even i was facing this issue …

remove the current camera plugin by running this command

 cordova plugin rm cordova-plugin-camera

Then install this old version of the plugin.

cordova plugin add cordova-plugin-camera@0.3.6

It should work after this.

Let me know if it works…

No luck. I’m still seeing the same cropping issue.

Here’s a comparison. The one that’s broken is from taking a picture. The one that works is from choosing a picture.

image

If you want really good image cropping then I can recommend this Angular directive:

https://github.com/alexk111/ngImgCrop

That works for any image no matter the source where you got it from.

I’ve tried ngImgCrop, which was ok, but it doesn’t support high resolution displays, like the iPhone. It looks bad / pixelated. I ask had issues getting an image to store locally after crop for use in uploading. But I’ve had that issue with every canvas based cropping directive.

Okay I see, thanks for the info.

Well actually I don’t even want the images in my app to be that hi-res, because I’m retrieving them over the network. So I want them to be fairly small (tens or hundreds of KB’s, not MB’s).

So, I’m setting the JPEG quality fairly low already (even before I feed them into ngImgCrop).

Didn’t run into issues of unacceptable quality as yet.

Try using this plugin to crop. I tried for Android. Worked very well.

The image quality is actually fine. It’s the interface that’s the issue. I submitted the issue on their github:

I’ve also tried implementation of cordoba-plugin-crop, which I liked, but the server is setup to take actual images, and not base64. I wasn’t able to get the base64 back to an image before uploading.

It would be great if this just worked. Or at least their was a work around that didn’t require supporting a whole other plugin.

Okay understood, thanks for the heads-up.

For now I’ll make do with this plugin (the project’s already taking too long anyway, and maybe I’ll not even release it on iOS), but I’ll keep eye on the issue, maybe they’ll supply a fix.

By the way, I’m using a fork of ngImgCrop:

https://github.com/iblank/ngImgCrop

The difference is that the fork allows rectangular (non-square) crop areas, something which I believe the Cordova camera plugin doesn’t even allow.

Did you ever find a solution to this?

+1

Same issue, I can’t crop on IOS9+

The image always snaps back into place

Same issue, is there a working solution ?

You may try

Any news with default crop? On iOS 10 still not working (after move image jumps back do default position.)

It’s likely due to native cropping capabilities in the iOS camera app. Reading up on this feature request for android, the cordova-camera-plugin delegates to the application for cropping. Not sure what it does for iOS, but it appears the plugin doesn’t implement pan and crop itself. If you read the README, you’ll see that the canEdit setting is ignored on most platforms. Likely not a good idea to use it unless you only need to support iOS – and are OK with an inconsistent UX between the camera and photo library.

I ended up implementing my own image zoom and pan on a canvas with mouse and touch support. Snippet is here, feel free to borrow the code. My implementation won’t force the image to stay within the canvas, however, double-tap/click will reset the image. My implementation does not allow image rotation, which some of the android croppers do allow. Hammer does provide a rotate event, so rotation could be added, if desired.

Any Info on this. Want something to crop images in IOS

Any news on this? I have latest version of ion and camera plugin and cropping after taking photo is not possible to change. If I choose from gallery, everything works…