Ionic : Image Cropping

1
votes

I am new to ionic framework and cordova. I have learnt to use the camera plugin. Now after getting the image, I want to crop a part of it. The cropping aspect ratio must not be static, i.e, the cropping box should be scalable ( in up, down, right, left directions).

I went through jeduan/cordova-plugin-crop but was not able to understand as it used Ionic v2, and I am working with ionic v1.

Please guide me to achieve this..
Is there any plugin to do so ?

3
cordovaionic-framework

3 Answers

1
votes

You can set allowEdit: true property for crop image get by camera:

var options = {
    maximumImagesCount: 1,
    quality: 75,
    targetWidth: 500,
    targetHeight: 500,
    sourceType: Camera.PictureSourceType.CAMERA,
    correctOrientation: true,
    allowEdit: true
};

$cordovaCamera.getPicture(options)
    .then(function (imageData) {

    // here imageData have crop image

    // do anything with crop image 
})
0
votes

was not able to understand as it used Ionic v2

The main api for this plugin is provided for javascript. You are not have to manage it in angular way or a ngCordova module. Just use javascript syntax into your controller.

plugins.crop(function success () {

}, function fail () {

}, '/path/to/image', options)

Note that you are included cordova.js in your index.html

0
votes

I am using jr-rop library and it uses pure Angular approach. You can use it as follows.

$jrCrop.crop({
    url: url,
    width: 200,
    height: 200
}).then(function(canvas) {
    // success!
    var image = canvas.toDataURL();
}, function() {
    // User canceled or couldn't load image.
});

After cropping it returns canvas object that you can manipulate further if needed.

Regards.