Cropper: How to change shape from square to circle in crop area?

[shahbaz-gaxon]

Hello,

i want to change shape from selecting area to square to circle.

which property should i use?

Please suggest me solution.

[fengyuanchen]

The Cropper does not support circle crop box, but you can customize it by yourself.

[shahbaz-gaxon]

how can i customize to convert it circle box?

any suggestion or fiddle it?

[fengyuanchen]

Override the relative classes as .cropper-crop-box and .cropper-view-box with border-radius, and set both cropBoxMovable and cropBoxResizable options to false.

[shahbaz-gaxon]

ok sir i will try it i have no clue to done it.because i am newbie to using this plugin?

[schuma7]

Hi,

I have been looking to achieve the same thing. Please note that you need to make use of the box-shadow property to create a rounded stroke, as outline currently doesn't follow the border-radius property in a cross-browser way.

I ended up using the following styles:

.cropper-crop-box, .cropper-view-box {
    border-radius: 50%;
}

.cropper-view-box {
    box-shadow: 0 0 0 1px #39f;
    outline: 0;
}

Tested in Safari, Chrome and Firefox on Mac OS, if you want to support IE8 you should consider resetting the outline for that browser, as it doesn't support border-radius and box-shadow.

I also had to set highlight: false when initializing cropper.

[shahbaz-gaxon]

Hii , schuma7

i have using your code..

.cropper-crop-box, .cropper-view-box {
border-radius: 50%;
}

.cropper-view-box {
box-shadow: 0 0 0 1px #39f;
outline: 0;
}

It does seems good. i want something like that round shape. good work.

Thanks schuma7

[Sandeepwal]

Hi Guys i'm also looking for this, where we need to change above css?

[fengyuanchen]

@Sandeepwal Here is an example from Cropper.js.

[Siva-Ganesh-VR]

Hey all by doing some css work we can make image crop into circle

.cropper-crop-box, .cropper-view-box {
    border-radius: 50%;
}

.cropper-view-box {
    box-shadow: 0 0 0 1px #39f;
    outline: 0;
}

.cropper-face {
  background-color:inherit !important;
}

.cropper-dashed, .cropper-point.point-se, .cropper-point.point-sw, .cropper-point.point-nw,   .cropper-point.point-ne, .cropper-line {
  display:none !important;
}

.cropper-view-box {
  outline:inherit !important;
}

[power-media]

As rectangular outer shape with handles might be easier to use, also most users are familiar with it more than circle (UX), I have another solution: Round internal plus rectangular outer shape as below:

Very little CSS to add to make it like this:

.cropper-view-box {
    box-shadow: 0 0 0 1px #39f;
    border-radius: 50%;
    outline: 0;
}
.cropper-face {
    background-color:inherit !important;
}
.cropper-view-box {
    outline:inherit !important;
}

[EugeneMeles]

Have nice result with css from @Siva-Ganesh-VR and some magic from me)

css:

.cropper-crop-box, .cropper-view-box {
    border-radius: 50%;
}
.cropper-view-box {
    box-shadow: 0 0 0 1px #39f;
    outline: 0;
}
.cropper-face {
  background-color:inherit !important;
}

.cropper-dashed, .cropper-line {
  display:none !important;
}
.cropper-view-box {
  outline:inherit !important;
}

.cropper-point.point-se {
  top: calc(85% + 1px);
  right: 14%;
}
.cropper-point.point-sw {
  top: calc(85% + 1px);
  left: 14%;
}
.cropper-point.point-nw {
  top: calc(15% - 5px);
  left: 14%;
}
.cropper-point.point-ne {
  top: calc(15% - 5px);
  right: 14%;
}

[GiangTruong-afk]

any example about rectangle shape

[rinogo]

Here's another solution, derived from the one by the one from @power-media.

In my application, I think it makes more sense to retain the blue border around the rectangle since that's the most "traditional" UI. Our users respond poorly to non-traditional implementations. The semi-opaque circular area is just an indication to the user regarding how the resulting image will be used (it will be enclosed within a circle). After all, there's no such thing as a circular image.

The CSS is surprisingly quite simple! 🎉🥳

.cropper-view-box {
    border-radius: 50%;
}
.cropper-face {
    background-color:inherit !important;
}

If you'd like to remove the dashed lines (like I have in the screenshot above), that CSS is also quite simple:

.cropper-dashed {
    display: none;
}

[AxelBriche]

How can I change the black transparent background for a white background without transparency please?

[rinogo]

@AxelBriche It's all CSS - just inspect the elements and apply some CSS to make the changes. If you need more info, you may want to open a new issue.