Crop Photo to Rectangle

[kieranbarlow]

Hi, I love this plugin however I find it difficult to change the default cropping ratio?

Currently it's defaulting to a square, I need it to be a rectangle similar to a passport size. 300x400 ratio.

Looking at a few existing issues which are closed they mention changing the following in the CTCrop.m file - as you can see below I've amended the width to 300 and the height to 400.

CGFloat width = 300;
    CGFloat height = 400;
    CGFloat length = MIN(width, height);
    cropController.toolbarHidden = YES;
    cropController.rotationEnabled = NO;
    cropController.keepingCropAspectRatio = YES;
    
    cropController.imageCropRect = CGRectMake((width - length) / 2,
                                              (height - length) / 2,
                                              length,
                                              length);

Once I run ionic build ios and test on my mobile the cropper is still square? Is there something I'm missing?

[John-Henrique]

See this fork https://github.com/obeza/cordova-plugin-crop-with-ratio by @obeza

[jeduan]

@John-Henrique @obeza do you guys plan on maintaining that fork? We could send people there from the README

[ThorvaldAagaard]

I would like to help sorting out the issue with versioning, if you give me access to the repository

(My OCD tells me all the time I need to update crop due to the fault in version numbers)

[John-Henrique]

@jeduan I can't, maybe @obeza yes

[fazpu]

Hi @John-Henrique and @obeza - I am not able to use the fork. More specifically, I am not able to import it and run the function successfully. Please could you share how you do it?

[ThorvaldAagaard]

@fazpu What kind of error do you get? If using Ionic you need to change the wrapper to get it to work

[fazpu]

@ThorvaldAagaard - thank you for response - yes, I am using Ionic - how should I change the wrapper?

The documentation says plugins.crop(function success () {, however I am not able to access the plugins / it does not work.

In the second example, there is the import { Camera, Crop } from 'ionic-native'; example, however the ionic-native directory does not exist in node_modules.

I am very confused about the use. I you could provide any guidance, I would be very grateful. Thank you!

[ThorvaldAagaard]

First of all you need to follow instructions a https://ionicframework.com/docs/native/crop/ - then you should have a working version of crop, but that will only make a square.

When all this works, you are ready to start using the version that can make a rectangle

Then if you want to use the rectangle from https://github.com/obeza/cordova-plugin-crop-with-ratio

you remove the crop-plugin you are using and add the new one

ionic cordova plugin remove cordova-plugin-crop
ionic cordova plugin add --save https://github.com/obeza/cordova-plugin-crop-with-ratio

Then you have the correct plugin, but that is taking more parameters, not yet defined in the Ionic wrapper, so in

node_modules@ionic-native\crop\index.d.ts

I change the Options to

export interface CropOptions {
    quality?: number;
    targetHeight?: number;
    targetWidth?: number;
    widthRatio: number;
    heightRatio: number;
}

and called the plugin with a statement like

crop.crop(fileUri, { 
          quality: 100, 
          targetWidth: self.settings.profileTargetWidth, 
          targetHeight: self.settings.profileTargetHeight, 
          heightRatio: self.settings.profileHeightRatio, `
          widthRatio: self.settings.profileWidthRatio 
          }
);

[charlesRms]

this works perfectly for me in android but the aspect ratio in ios is not changed by the new parameters. It sticks with the original one. Does anyone has a solution ?

[mustafashakeel]

Thanks, Its working

[atheerahassan]

following the documentation, where exactly do i need to insert the codes:

this.crop.crop('path/to/image.jpg', {quality: 75}) .then( newImage => console.log('new image path is: ' + newImage), error => console.error('Error cropping image', error) );

like in my case, do i put it like this?

takePicture(sourceType) {
  let options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.PNG,
    mediaType: this.camera.MediaType.PICTURE
  };

  this.camera.getPicture(options)
 .then((captureDataUrl) => {
   this.captureDataUrl = 'data:image/jpeg;base64,' + captureDataUrl;
}, (err) => {
    console.log(err);

    this.crop.crop('path/to/image.jpg', {quality: 100})
    .then(
     newImage => console.log('new image path is: ' + newImage),
     error => console.error('Error cropping image', error)
     );
});
}

[kaspermarkus]

While @ThorvaldAagaard's example helps avoiding the error message Argument of type '{ ... widthRatio: number; heightRatio: number; }' is not assignable to parameter of type 'CropOptions'. ... and 'widthRatio' does not exist in type 'CropOptions', it requires you to modify crop/index.ts.d every time npm install has been run.

One way to avoid this is to extend the CropOptions interface, which was defined in crop/index.ts.d, with the new properties, like so:

interface ExtendedCropOptions extends Partial<CropOptions> {
    heightRatio?: number;
    widthRatio?: number;
};

This can happen anywhere in your code, as long as ExtendedCropOptions is available in the scope you're using the crop function.

Now using the cropper with ratios is as easy as:

let cropOptions : ExtendedCropOptions = {
      quality: 75,
      widthRatio:1,
      heightRatio:1
}
this.crop.crop(imageData, cropOptions).then( ... );

[rhanamiyassine]

Hello @ThorvaldAagaard, where you declare settings variable

[akildemir]

@ThorvaldAagaard @kaspermarkus It is wrokign good, I can crop rectangular images but even tho I set widhtRatio to 1 and heightRatio to 0.5, it allows me to cut in any ration I want. But I want to allow user to cut only with widhtRatio 1 and heightRatio 0.5. I want the height of the image half of the widht of the image? which ratio provides this? Thanks! this my options : cropOps = { quality : 75, targetHeight : 400, targetWidth : 750, widthRatio : 1, heightRatio : 0.5 }

[pgcan]

@ThorvaldAagaard @kaspermarkus It is wrokign good, I can crop rectangular images but even tho I set widhtRatio to 1 and heightRatio to 0.5, it allows me to cut in any ration I want. But I want to allow user to cut only with widhtRatio 1 and heightRatio 0.5. I want the height of the image half of the widht of the image? which ratio provides this? Thanks! this my options : cropOps = { quality : 75, targetHeight : 400, targetWidth : 750, widthRatio : 1, heightRatio : 0.5 }

@akildemir , did you get the plugin working.... i am also getting same issue. It doesn't follow the ratio i provide in parameters but let me crop in any ratio.

[akildemir]

@Prasoon1983 Yea it is working. The problem was in the case mine is that I realized that this plugin only works with integers. So instead of widthRatio : 1, heightRatio : 0.5 I did widthRatio : 2, heightRatio : 1 and it only allows me to 1 to 2 ratio.

[pgcan]

@Prasoon1983 Yea it is working. The problem was in the case mine is that I realized that this plugin only works with integers. So instead of widthRatio : 1, heightRatio : 0.5 I did widthRatio : 2, heightRatio : 1 and it only allows me to 1 to 2 ratio.

Thanks @akildemir, it was a day saver. I started reading code of plugin to understand the logic but then you saved lot of time.