Skip to content
This repository has been archived by the owner on Nov 27, 2018. It is now read-only.

Trigger crop on a custom event #35

Open
KarlDoyle opened this issue Mar 20, 2016 · 1 comment
Open

Trigger crop on a custom event #35

KarlDoyle opened this issue Mar 20, 2016 · 1 comment

Comments

@KarlDoyle
Copy link
Contributor

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
@tomchi89
Copy link

tomchi89 commented Apr 7, 2017

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants