Comments (17)
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 didwidthRatio : 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.
Related Issues (20)
- Crash issue for Android
- I hava some changes HOT 1
- Question on this plugin
- Plugin is not updating to the modified targetWidth and targetHeight latest version HOT 2
- App crash on android when device orientation horizontal
- Android 8.00 camera bug
- Change the button's text label
- Error userCancelled HOT 2
- Android 7+ problem in save cropped image HOT 10
- final image size is bigger then targetWidth and targetHeight HOT 9
- plugin_not_installed Error HOT 1
- add option to auto resize image
- Rectangle crop
- Image transparency not supported
- Selecting multiple images for crop crash the APP HOT 1
- IOS : Allow rotation and display button for rotate
- Error cropping image Unable to find explicit activity class HOT 1
- Failure form system
- To save crop image in persitent storage
- Crop image not woks on android syteme
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cordova-plugin-crop.