jeduan / cordova-plugin-crop Goto Github PK

i am sorry, i have tried this plugin many times..but always failed..
after install this plugin and place usage code on button click.. but nothing happen...

can you explain to me full example how to use it? i am sorry i am beginner in cordova

Hey there

Thanks for the amazing work here.

I was just wondering, what is the status of this plugin? Is it ready to use for production? are there any known issues?

Error - Some official plugins have to be updated if using PhoneGap >= 4.0.0. Please upgrade the version of any plugins that may include the following file: CropPlugin.java

Hi mate,

First of all i would like to thank you for the wonderful plugin. It has been a life saver for me.

I just needed to enquire that can we somehow lock the square aspect ratio of the crop window. As currently if we crop the picture it allows user to change the aspect ratio of crop window.

We are actually using only square photos in our application so to maintain the sanity of the pictures we want to lock the aspect ratio of the crop window

Any help will be greatly appreciated mate.

Regards
Vaibhav

Hi,

More of a query.

Is there any way to apply custom style to the crop page? e.g. I would like to change the Cancel and Done font color and even background image of crop page.

BR

Hai friends......
We take the photo (with A4 Sheet and some background) using camera....... We need to crop the A4 Sheet only (Without background) is possible...? please advice........

How to get actual image file and show it in view? Also I am trying to get cropped and send it to server. How can I do that? Code I tried:

return this.camera.getPicture(this.options)
    .then((fileUri) => {
        if (this.platform.is('android')) {
            return this.crop.crop(fileUri).then((path) => {
            this.imgUrl = path;
        });
     }
 });

<img [src]="imgUrl" />
which not showing any image
Code returns me path, in format: file:///storage/..... but image is not shown.

Crop is not working for dataurl.

I am using this plugin from @ionic-native ((at)Ionic-native/crop) and in my config.xml i have this line

<plugin name="cordova-plugin-crop" spec="^0.3.1" />

but when i execute ionic cordova plugin list I get this line

cordova-plugin-crop 0.1.0 "CropPlugin"

Looking at your repository I can see that in package.json there is stated another version

"name": "cordova-plugin-crop",
"version": "0.4.0",
"description": "Crop an image in a Cordova app",

but in plugin.xml we have

<plugin xmlns="http://www.phonegap.com/ns/plugins/1.0"
xmlns:android="http://schemas.android.com/apk/res/android"
id="cordova-plugin-crop"
version="0.3.1">

I can see that (at)ionic-native/crop is referring to https://github.com/jeduan/cordova-plugin-crop

This is both for IOS and Android

Hello there,

i know that this isn't an issue but is it possible to open the crop-window in a view and not in a modal in ionic?

Greetz,

Blackscr33n

After we crop the image, it is stored in tmp path but older image is replaced. So if we want to cancel the event after cropping, we cannot pull image from storage since it gives new replaced file

on line 30 can you change it to
this.outputUri = Uri.fromFile(new File(getTempDirectoryPath() + "/" + System.currentTimeMillis()+ "-cropped.jpg"));

so that every image will be new.

Thanks in advance.

Is there support for free cropping? What I mean by that is, let the user also extend the corners and create rectangles and stuff.

Is this on the agenda? Or is there some sort of function/configuration/fork to use?

Is this on the drawing board by any chance?

My requirement is when i'll crop any file there should be a option for delete original file and get new cropped file with same name.

How can i set width and height while cropping in IOS. i need to crop landscape image to a specified height and width. is there any way to achieve this? Thank you

Hi, I love this plugin however I find it difficult to change the default cropping ratio?

Currently it's defaulting to a square, I need it to be a rectangle similar to a passport size. 300x400 ratio.

Looking at a few existing issues which are closed they mention changing the following in the CTCrop.m file - as you can see below I've amended the width to 300 and the height to 400.

CGFloat width = 300;
    CGFloat height = 400;
    CGFloat length = MIN(width, height);
    cropController.toolbarHidden = YES;
    cropController.rotationEnabled = NO;
    cropController.keepingCropAspectRatio = YES;
    
    cropController.imageCropRect = CGRectMake((width - length) / 2,
                                              (height - length) / 2,
                                              length,
                                              length);

Once I run ionic build ios and test on my mobile the cropper is still square? Is there something I'm missing?

i am getting small frame to crop image in android. i need to full image croping. thanks in advance.

camera plugin and this crop plugin not work correctly together on ios 9. the crop never start.

var cameraPopoverHandle = navigator.camera.getPicture(function(cameraImageURI){//ok

    plugins.crop.promise(cameraImageURI)

    .then(function(newPath){
        //success crop
    })
    .catch(function(err){
        //error crop
    });

},function(message){
    //error camera
},{
    quality:100,
    destinationType: Camera.DestinationType.NATIVE_URI,
    sourceType:Camera.PictureSourceType.CAMERA,
    correctOrientation: true
});

Can I set a default squared crop?

I've been searching for a solution for squared cropping since the camera plugin does not allow that on android's device.

Thanks!

Hi, I use this plugin to crop the image and now I face some issues.

In iOS, I use cordova-plugin-camera to take a photo, then use this plugin to crop it. But I found that, the size of photo after crop is bigger. Before crop ,it's 1.7M, after crop, it's 3M.

My iOS version: 10.2

I getting image small image when I taken image from camera to crop. and also how to crop the image with circular. please help me.

My code is like this

    var myPopup = $ionicPopup.show({
     title: 'Upload Profile Background Image',
  
     buttons: [
        { 
          text: '<b><i class="icon ion-close size-25 dark"></i></b>',
          'type':'button-assertive',
            onTap: function(e)
            {
              return 0;
             }
         }, {
           text: '<b><i class="icon ion-images size-25 dark"></i></b>',
           type: 'button-positive',
            onTap: function(e)
            {
        
              var options = {
                               quality : 100,
                               targetWidth: 400,
                               targetHeight: 200,
                               correctOrientation: true,
                               sourceType: 0
                            };
              return options;
                 
            }
        },
        { text: '<b><i class="icon ion-camera size-25 dark"></i></b>',
          type: 'button-positive',
          onTap: function(e)
          {
        
             var options = {
                             quality : 100,
                             targetWidth: 400,
                             targetHeight: 200,
                             correctOrientation: true,
                             sourceType: 1
                          };
             return options;
                 
         }
        }
     ]
  });

  myPopup.then(function(options) {
    if(options != 0)
    {
       $cordovaCamera.getPicture(options).then(function(imageData)
       {
              var option={keepingAspectRatio : true,allowEdit: true}
            $rootScope.bgimage = imageData;
         var pbgurl = $rootScope.bgimage.split('?')[0];
         plugins.crop(function success (newPath) {
          // console.log(newPath);
         
           document.getElementById('bgprofile').style.backgroundImage = "url('"+newPath.split('?')[0]+"')";

          
         
          }, function fail () {
             

           }, pbgurl,option)
       
           $scope.edit=false;
           $scope.save=true;
       })
    }
  }),
  function(err)
  {
    console.log(err);
  };  

Hi Team,
After cropping image in iPad, image becomes too blur. Can you please suggest how can i resolve this?

Hai Friends.....
I need to crop image as rectangle, how to change the crop area from square to rectangle.....is possible? please advice.....

can i crop the image which is not pick up through camera or photo gallery ?? like below

var options = [
                    allowEdit: true,
                    sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
                    mediaType: Camera.MediaType.ALLMEDIA,
                    destinationType: Camera.DestinationType.FILE_URI
                ];

                plugins.crop.promise('https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg', options)
                .then(function success (newPath) {

                });

Hai jeduan
I need to show the one view controller.......... like image and crop option inside the popup u displayed in this plugin....how to do this? I analysis the ur code i thinks following line..

UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:cropController];
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
navigationController.modalPresentationStyle = UIModalPresentationFormSheet;
}
[self.viewController presentViewController:navigationController animated:YES completion:NULL];

but i don't know how to link with self.vieController.....
Please help me ya.. and send the step to do this please advice...........

While building on Visual Studio (using Cordova) getting following error:

Could not GET 'https://repo1.maven.org/maven2/com/soundcloud/android/android-crop/1.0.0/android-crop-1.0.0.pom'

does it mean that the plugin will hit this URL everytime? Further, why I am not able to connect to this URL from Visual Studio (I can connect via browser)

Hi,

I have been using this plugin and it gives me error while I try to upload image from gallery and crop it says Failed image crop plugin and When I track the issue some permission related issue is coming but I have already given all kind of permission for red and write in Android Manifest File in ionic project

"user cancelled"," error in cropping" are some message which we show it on a view.
Is there any way to have custom message on js side.

Thanks again. :)

When using the crop, with some code like:

plugins.crop
.promise(imageURI)
.then( function(cropped_path) {
document.getElementById("myimg").src = cropped_path;
});

I can't do "anything" with the new path from the image. The adb console (Android) always returns:

I/chromium(28689): [INFO:CONSOLE(0)] "Not allowed to load local resource: file:///storage/emulated/0/Android/data/io.ionic.starter/cache/cropped.jpg?1456771434075", source: http://192.168.10.35:8100/ (0)

It seems the new Android doesn't allow to read anything from local storage, and so it's impossible to (example:) read the binary from the file. I know this is not something related to the plugin, but I got stuck with the implementation: how can I access the cropped image? Am I missing anything.

Is it possible to crop video files with this plugin?

Hi, after this example code:

        console.log('Cropped Image Path!: ' + path);
        // Do whatever you want with new path such as read in a file
        // Here we resolve the path to finish, but normally you would now want to read in the file

How can I read this image and then convert to a blob file to can upload it?

Thanks!

can any body help me , i am getting this error

Hi Jeduan,

we are trying to use plugin in simple cordova project.we are using javascript. we got this error:
TypeError: plugins.crop is not a function. (In 'plugins.crop', 'plugins.crop' is undefined)

please help us to solve the error.
thanks in advance.

I am facing some problems to open the crop, it is very slowly, by searching about native threads I find something that is use to run the plugin in the main thread, my question right now is about to add that feature to the plugin, I made my own version with:

iOS (added when presentViewController):

   dispatch_async(dispatch_get_main_queue(), ^{
        PECropViewController *cropController = [[PECropViewController alloc] init];
        cropController.delegate = self;
        cropController.image = image;
        
        CGFloat width = image.size.width;
        CGFloat height = image.size.height;
        CGFloat length = MIN(width, height);
        cropController.toolbarHidden = YES;
        cropController.rotationEnabled = NO;
        cropController.keepingCropAspectRatio = NO;
        
        cropController.imageCropRect = CGRectMake((width - length) / 2,
                                                  (height - length) / 2,
                                                  length,
                                                  length);
    
        UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:cropController];
        
        if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
            navigationController.modalPresentationStyle = UIModalPresentationFormSheet;
        }
        
        [self.viewController presentViewController:navigationController animated:YES completion:NULL];
    });

Android:

cordova.getActivity().runOnUiThread(new Runnable() {
    public void run() {
         Crop.of(cropPlugin.inputUri, cropPlugin.outputUri)
            .start(cordova.getActivity());
    }
});

Can you explain why it is not added to the plugin. In my case it solved all the problems when open the cropper and maybe I can create a PR to add this feature to the plugin.

Thanks.

Hi Mate,

Is there any way where we can resolution of the photo . like the width and the height?

Regards

Vaibhav

First of all, thanks so much for the awesome plugin! I have a problem, as when I reduce the quality of the photos, the quality/size doesn't reduce. Here's my code. Any advice will be highly appreciated! Many thanks!

      this.camera.getPicture(options).then((imageURI) => {
        this.crop.crop(imageURI, {quality: 20}).then((newImage) => {
        }).catch((error: any) => { console.log('Crop error: ', error); this.loading.dismiss(); });
      }).catch((error: any) => { console.log('Photos error: ', error); this.loading.dismiss(); });

Works with Ionic v1?

Do you have this plugin for Ionic 1, If yes please share.

Thanks

Hi, thank you for the great plugin.
I am using it to crop images to squares in my app, and I've noticed that user can change the cropper frame from default square to a rectangular. It would be nice to prevent user from being able to do that.
It would be very useful if I could specify the width and height of a destination image and have cropper honor this aspect ratio.

Hi Jeduan,

Thanks for the very good work, is there any way to set the size for the default crop frame?
In my app we have some limitation for the cropped image size, so how to pass the maximum width and height of the cropped frame?

Thanks in Advance.

Hello,

I been trying to get this to work with Cordoba 5.4.1 . I think whats happening is the call to plugins-crop is incorrect.

I tried the below scenarios:

plugins.crop.promise(imageURI, {quality: 100})
window.plugins.crop.promise(imageURI, {quality: 100})
navigator.plugins.crop.promise(imageURI, {quality: 100})

none seem to work. Here is how I have it setup ( i got this from another post in this forum . I have no frame work like iconic or anything like that just plan Cordova )

try{
            navigator.camera.getPicture({
                quality: 100,
                encodingType: Camera.EncodingType.JPEG,
                destinationType: navigator.camera.DestinationType.FILE_URI,
                sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,
                popoverOptions: new CameraPopoverOptions(10, 30, Number(width), Number(height), Camera.PopoverArrowDirection.ARROW_ANY)
            })
              .then(
                imageURI => {

                navigator.plugins.crop.promise(imageURI, {quality: 100})
                    .then(
                      newPath => {
                        console.log(newPath);
                        alert(newPath);
                      },
                      err => alert(err); }
                    );
                },
                 err =>  alert(err);
              );

}catch(e){

  alert(e);
}

Hi,

Please show an example to use it with ionic 1

I'm not able to get a correct orientation while croping , when i tried to capture an image from Camera in Samsung devices (Using cordova camera plugin ) then crop the image, but the orientation is not correct.

I take photo as portrait, however, it make the photo landscape.
How can i remain it portrait.

Is there a way to force a specific aspect ratio for the crop such as 16:9 or 1:1?

I tried cropping image captured using cordova-camera plugin (https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera). I used Base64 encoding, However, I was not able to crop it using this plugin. My code is like below:

$scope.cropImage = function () { var image = document.getElementById('imgSignature'); plugins.crop.promise(image.src, { quality: 100 }) .then(function success(newPath) { image.src = "data:image/jpeg;base64," + newPath; }) .catch(function fail(err) { var e = err; }) }

` $scope.captureSign = function () {
navigator.camera.getPicture(onSuccess, onFail, {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL
});
}

function onSuccess(imageData) {
    var image = document.getElementById('imgSignature');
    image.src = "data:image/jpeg;base64," + imageData;
}

function onFail(message) {
    console.log('Failed because: ' + message);
}`

Any idea why? It does not generated any error.

I wanna know how to always show the circles when croping the image

Hi,
I want to change the language of the buttons as "cancel" and "done".
Is it possible or how.

Thanks.