Croppr.js icon indicating copy to clipboard operation
Croppr.js copied to clipboard

Cropper region as circle

Open phlegx opened this issue 5 years ago • 1 comments

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

phlegx avatar Mar 21 '19 14:03 phlegx

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

jamesgeldart avatar Feb 16 '22 09:02 jamesgeldart