Round Cropper

[ruthansah]

Thank you for this wonderful plugin. Is there a way to configure the cropper to be round rather than square?

[Enlcxx]

use css, border-radius: 50%;

[sajidgangat]

Any updates on this? How can I display round cropper instead of the default square? Where should I place border-radius: 50%;?
@Enlcxx @alyleui

[Enlcxx]

Hi @sajidgangat sorry for the delay.

Add border-radius: 50%; to the result in your stylesheet, but if you want to edit the cropping area, you can add variables to theme.

e.g.

export class GlobalVariables implements PartialThemeVariables {
  ...
  ...
  imgCropper = {
    root: {
      '& {area}, & {area}::after': {
        borderRadius: '50%'
      }
    }
  };
}

result:

Obviously this will not make the result rounded, so do not forget to add the styles to the result.