Does anyone know of an image cropping plugin which will work with Ionic 2?
Less of a “will it work with ionic2” and more of “is there a cordova plugin for this”
Which one is better for Ionic2 dev?
or
or
or
Another?
Please can someone with recommend one they have had success with?
I anyone has an example of a successful way how to crop a base64 image, please let me know. All of the above examples look like they use a URI, and not a base64 image (for example like the one returned by the cordova-plugin-camera
)
These look to be able to crop base64 images, but seems to only work for Android. Does anyone know of an equivalent for iOS too?
Thanks
Hi Mike,
I am trying to get cordova-plugin-crop working with Ionic 2. I can install it fine with:
$ cordova plugin add --save cordova-plugin-crop
but cannot seem to get a handle on the plugin in my ts file. I am a little confused on how to access the plugin, do I need an import? To what directory? Do you have any ideas please?
I had a look at ionic-native. I have an Ionic 2 app, so I already have it set up, and it does have a number of cordova plugins (e.g. cordova-plugin-camera), which I can access via an import and access the promise.
import { Camera } from 'ionic-native';
My confusion is, how do I get other cordova plugins (i.e. cordova-plugin-crop
) into ionic-native
? So that I can import it?
import { CropPlugin } from 'ionic-native';
produces the following error:
[ts]
Module '"e:/Development/IDE/ionic-apps/jobsForHire/node_modules/ionic-native/dist/index"' has no exported member 'CropPlugin'.
import CropPlugin
Appreciate your help.
You can’t and it’s not neccessary. You can use it like in the docs.
Or if you feel like it, you might write a wrapper and add a pull request
Hi maxx0r,
Thanks for the quick reply.
The docs say it can be used as follows:
plugins.crop.promise('/path/to/image', options) .then(function success (newPath) {
}) .catch(function fail (err) {
})
But how do I get a handle on plugins
in my ts file?
When compiled to an app, the plugins object will be bound to the window object. If you run your app on a device, it will be available
Does that mean, it cannot be tested in a browser?
The CLI gives the following error:
Error TS2304: Cannot find name 'plugins'.
Also my IDE (Visual Studio code) flags it as as an error:
[ts]
Cannot find name 'plugins'.
any
Apologies, I am a little confused how you mean it can just compile on a devise. That then makes a browser testing environment like http://localhost:8100/ionic-lab
redundant?
I think I know what you mean, apologies. I will try the following:
var options = null; window['plugins'].crop.promise('/path/to/image', options) .then(function success (newPath) {
}) .catch(function fail (err) {
})
You can test it before accessing
if(window.plugins && window.plugins.crop) {
// You code
} else {
console.info("Crop plugin not available")
}
Thanks maxx0r, I just tested it on my device and it works.
I have been struggling with this, to thank you.
Great I’ve been there too, glad I could help.
I do the following. It takes a photo or allows picking from gallery depending on PictureSourceType
, and then crops the image and saves as base64.
import { Camera } from 'ionic-native';
takePhoto(pictureSourceType) { this.takeThePhoto(navigator.camera.PictureSourceType.CAMERA); }
pickImage() { this.takeThePhoto(navigator.camera.PictureSourceType.SAVEDPHOTOALBUM); }
takeThePhoto(pictureSourceType) { Camera.getPicture({ sourceType: pictureSourceType, destinationType: Camera.DestinationType.FILE_URI, quality: 50, targetWidth: 720, correctOrientation: true, encodingType: Camera.EncodingType.JPEG }) .then( imageURI => { window['plugins'].crop.promise(imageURI, { quality: 75 }).then(newPath => { return this.toBase64(newPath).then((base64Img) => { this.base64Image = base64Img; }); }, error => { console.log("CROP ERROR -> " + JSON.stringify(error)); alert("CROP ERROR: " + JSON.stringify(error)); } ); }, error => { console.log("CAMERA ERROR -> " + JSON.stringify(error)); alert("CAMERA ERROR: " + JSON.stringify(error)); } ); }
toBase64(url: string) { return new Promise<string>(function (resolve) { var xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; xhr.onload = function () { var reader = new FileReader(); reader.onloadend = function () { resolve(reader.result); } reader.readAsDataURL(xhr.response); }; xhr.open('GET', url); xhr.send(); }); }
resize(base64Img, width, height) { var img = new Image(); img.src = base64Img; var canvas = document.createElement('canvas'),ctx = canvas.getContext('2d'); canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); return canvas.toDataURL("image/jpeg"); }
Thx a lot for sharing the code, works really well.
Did you also find a way to specify the size (width/height) of the cropped image?
Here you go:
> this.base64Image = this.resize(this.base64Image, 150, 150);
Cool thx, I should had scroll before.
Tried but somehow my images wasn’t resized correctly.
I didn’t search that much longer because I’m also not sure that this plugin is the solution for my app. I would also like to have a fixed aspect ratio of the “cropper selector” which is actually not possible (https://github.com/jeduan/cordova-plugin-crop/issues/8)
I am getting a permission error Not allowed to load local resource: file:///storage/emulated/0/Android/data/......
any idea’s?
I’m not sure where you are running it, but it doesn’t work in a browser. Do a cordova build and install the apk on your device.
i’m running in emulator, the error fixes when i dont run with -l -c … when i run without it works fine.