Croppr.js
Croppr.js copied to clipboard
Cropper region as circle
Hi! How can i change the cropper region as a circle when aspect ratio is 1:1?
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