CODEWITHSUNDEEP
cordovaionic-framework
Saurav Pradhan
Saurav Pradhan

Reputation: 115

Ionic : Image Cropping

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 ?

Upvotes: 1

Views: 1878

Answers (3)

keval nayak
keval nayak

Reputation: 254

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

Upvotes: 1

Hardik Vaghani
Hardik Vaghani

Reputation: 2173

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.

Upvotes: 0

Vahid Najafi
Vahid Najafi

Reputation: 5243

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

Upvotes: 0

Related Questions