Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cropper region as circle #33

Open
phlegx opened this issue Mar 21, 2019 · 1 comment
Open

Cropper region as circle #33

phlegx opened this issue Mar 21, 2019 · 1 comment

Comments

@phlegx
Copy link

phlegx commented Mar 21, 2019

Hi! How can i change the cropper region as a circle when aspect ratio is 1:1?

@jamesgeldart
Copy link

You can achieve this by patching the dist/croppr.js file

Function redraw, line 685, replace

       _this3.imageClippedEl.style.clip = 'rect(' + y1 + 'px, ' + x2 + 'px, ' + y2 + 'px, ' + x1 + 'px)';

with

      if(_this3.useCircle) {
         _this3.imageClippedEl.style.clipPath = 'circle(' + ((x2 - x1)/2) + 'px at ' + (x1 + (x2-x1) / 2) + 'px ' + (y1 + (y2-y1) / 2) + 'px)';
       }
       else {
         _this3.imageClippedEl.style.clip = 'rect(' + y1 + 'px, ' + x2 + 'px, ' + y2 + 'px, ' + x1 + 'px)';
       }

You can then set the useCircle property on your croppr object and it will use a circle instead, although you also need to constrain it to an aspect ratio of 1 when you instantiate the object (just past aspectRatio: 1 in options)

This would be a nice addition to the library I think

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

No branches or pull requests

2 participants