Crop Photo to Rectangle about cordova-plugin-crop HOT 17 OPEN

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 
          }
);

from cordova-plugin-crop.

@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.

from cordova-plugin-crop.

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

from cordova-plugin-crop.

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

from cordova-plugin-crop.

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)

from cordova-plugin-crop.

@jeduan I can't, maybe @obeza yes

from cordova-plugin-crop.

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?

from cordova-plugin-crop.

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

from cordova-plugin-crop.

@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!

from cordova-plugin-crop.

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 ?

from cordova-plugin-crop.

Thanks, Its working

from cordova-plugin-crop.

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)
     );
});
}

from cordova-plugin-crop.

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( ... );

from cordova-plugin-crop.

Hello @ThorvaldAagaard,
where you declare settings variable

from cordova-plugin-crop.

@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 }

from cordova-plugin-crop.

@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.

from cordova-plugin-crop.

@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.

from cordova-plugin-crop.