Cordova Camera + crop

1

I’m trying to crop image from photo library by adding allowEdit property. But I can’t set custom height and width. It always looks like square. I can’t setting up it to 400x600(for example).

Is it known problem or I’m doing something wrong?

For the code below I always get square image with 400px.

 navigator.camera.getPicture(cameraSuccess, cameraError, {
        targetWidth: 600,
        targetHeight: 400,
        quality: 70,
        allowEdit:true,
        encodingType: Camera.EncodingType.JPEG,
        mediaType: Camera.MediaType.PICTURE,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        popoverOptions: CameraPopoverOptions,
        correctOrientation: false,
        destinationType: Camera.DestinationType.FILE_URL,
        saveToPhotoAlbum: true
    });

Environment: iOS Emulator

1 Like
2

I have found a good solution based on pure js.

3

When specify targetWidth and targetHeight in Cordova Camera Plugin,
It always remains aspect ratio of selected image,
That’s why it always select image with square.

If you want to crop image without square format then,
Don’t specify targetWidth and targetHeight attributes.

There are several plugins available for crop image.

  1. Angular Image Crop
  2. ngImgCrop
  3. jr-crop

I have use jr-crop plugin, which working in Android and iOS.

2 Likes
4

This is a great thread. Of the suggestion above, ngImgCrop seems to have the exact features I need, HOWEVER, I am having a heck of a time trying to get it to work properly in an $ionicModal view. There is something in the CSS that always seems to set the cropping canvas to around 100px x 100px instead of the width and height of the parent <div>.

I would appreciate it if anyone else who has played with ngImgCrop can give me a heads up…

Thanks!

1 Like
5

@Nayan I tried to get jr-crop to work as it seemed the most attractive choice, but I simply cannot get it to play nicely in Android. What did you do?

6

I got the same issue. Anyone can help?

7

For me ngImgCrop was the most attractive choice. Many options, simple to use and an excellent UI.
(I prefer its UI over what jr-crop does)

Works perfectly on Android, not tested yet on iOS. By the way I’m using this fork:

because this fork allows me to have a non-square cropping area (rectangle instead of just a square).

8

Hi leob, ngImgCrop seems great. You say that this fork allows rectangle cropping, can you say more about this ? I’m stuck with the circle or square cropping. Thx !

9

ngImgCrop works great for me on both Android and iOS. However, you can’t do pinch to zoom, you must use the indicators in each corner. It works great, but when I showed my client it for the first time, they kept trying to pinch to crop/expand the selection and it seemed buggy. Once I showed them you just drag the corners, it worked great.

Possibly a small issue, but I just wanted to share my experience with this plugin. I highly recommend it.

10

Yes, the fork allows you to specify an aspect ratio in your Angular controller like this:

        var relativeWidth = 3;
        var relativeHeight = 1;

        $scope.image = {
          originalImage: image,
          croppedImage: '',
          aspectRatio: relativeWidth + "x" + relativeHeight
        };

In this case, you get an aspect ratio of “3x1” (width is 3 times the height). If you want it the other way around you specify “1x3”. And the default (of you specify nothing) is “1x1” (square).

In your template you would code it like this:

          <img-crop image="image.originalImage"
                    result-image="image.croppedImage"
                    area-type="square"
                    result-image-format="image/jpeg"
                    result-image-quality="1.0"
                    result-image-aspect="{{image.aspectRatio}}"
                    change-on-fly="true">
          </img-crop>

If you want a full example including taking the picture (Cordova Camera), cropping and displaying, then you can have a look at my Ionic starter app:

https://github.com/leob/ionic-quickstarter

The README has instructions on how to install and run it (there’s also a Wiki with instructions specifically on the image functionality and how to configure/run it).

11

Can i also use jr-crob when i am Not using ionic, just cordova?

12

When specify targetWidth and targetHeight in Cordova Camera Plugin,
It always remains aspect ratio of selected image,
That’s why it always select image with square.

This doesn’t make sense. If you specify a width of 600 and a height of 400 and you get a square, what are the dimensions of the square?

13

it doesn’t make sense indeed. In fact it works on android.

14

how did you do it , after taking the picture with cordova camera , how did you crop it .
can you share a code sample .

Thanks :slight_smile:

1 Like