ng img crop-裁剪现有图像

Question

ng-img-crop is an awesome directive however I am having trouble adapting it to my scenario. My issue is that when a user has an image I would like to give them the option to resize the image if they would like to.

So here is the code I am attempting to use:

js:

vm.userImageOriginal = vm.editUser.image_pkey ? 'api/file/' + vm.editUser.image_pkey : null;

html:

<img-crop image="profileVM.userImageOriginal" result-image="profileVM.userImageNew"
                                          area-type="square" result-image-size="300" on-change="profileVM.imageCropped = true;"></img-crop>

So I two issues:

1) I only want to upload the new image if the user has indeed changed the cropping. I tried setting a flag in on-change but it looks like on-change gets executed on initialization as well. Is there any way to know if the user has actually cropped?

2) Is there any way to set the position of the square/circle. In my scenario, if there is an existing user image, I would like to set the cropping square to the dimensions of the current image (ie the border of the image).

Thanks in advance.

Answer 1

Solved like this:

Add the following attribute to ng-img-crop directive in html:

on-load-done="profileVM.addCroppingWatcher()"

Here is the function:

function addCroppingWatcher(){
            if (croppingWatcher)
                return;

            $window.setTimeout(function(){
                croppingWatcher = $scope.$watch(
                    function(){ return vm.userImageNew; },
                    function(newVal, oldVal){
                        if (oldVal && oldVal != newVal) {
                            vm.imageCropped = true;
                            croppingWatcher();
                        }
                    }
                );
            }, 0);
        }