angular-image-cropper icon indicating copy to clipboard operation
angular-image-cropper copied to clipboard

Trigger crop on a custom event

Open KarlDoyle opened this issue 9 years ago • 1 comments

Hey @bcabanes ,

I would like that the crop is initialized anytime the user takes an action ( move, rotate, etc ) so the user is not dependent on clicking the crop action.

Do you have any plans to roll this out at all ?

I implemented this already, but wondering on your thoughts if there is a better approach or should I submit a Pull Request ?

Thanks

angular-image-cropper.js Here is what I added for it to work.

    this.elements.controls.rotateLeft.addEventListener('click', function() {
      self.applyRotation(-90);
      self.elements.controls.crop.click(); // line added
    });
    this.elements.controls.rotateRight.addEventListener('click', function() {
      self.applyRotation(90);
      self.elements.controls.crop.click(); // line added
    });
    this.elements.controls.zoomIn.addEventListener('click', function() {
      self.applyZoomIn(self.zoomInFactor);
      self.elements.controls.crop.click(); // line added
    });
    this.elements.controls.zoomOut.addEventListener('click', function() {
      self.applyZoomOut(self.zoomOutFactor);
      self.elements.controls.crop.click(); // line added
    });

And another in move function

    // Move.
    this.setOffset(left, top);

    this.elements.controls.crop.click(); // line added

KarlDoyle avatar Mar 20 '16 18:03 KarlDoyle

I would take an api first and take control over .crop method.

`

this.getApi = (api) => { return this.api = api; };

Now I can use this.api.crop() anywhere I want to. So for example:

Created a function that I can assign to my button.

rotateLeft() { this.api.rotate(-90); this.api.crop(); }

Can also define custom crop callback that can do what I need when an image is crop.

tomchi89 avatar Apr 07 '17 22:04 tomchi89