Can we crop image as a grids configured?

[AlbertLiu1974]

Hi All,

Just met some requirement for cropping image with grids. Just like the sample below which is 5x6 sized tag label and I need to crop it according to the defined 5x6 size. Thanks.

Br, Albert

[MaxymGorn]

Hi @AlbertLiu1974. I suppose that option is supported in release candidate for v2 cropper.js sdk: https://fengyuanchen.github.io/cropperjs/v2/api/cropper-grid.html. Perhaps in the first version it is possible to do this through css or to access these cropper elements manually and generate the appropriate blocks via js.

[MaxymGorn]

@AlbertLiu1974 I'm researching this and the easiest way to do it for the current (1.6.2) cropper.js version is:
just change (ovveride) following css properties for specific classes and put polygon image (your grid):

Css code for .cropper-dashed.dashed-h:

.cropper-dashed.dashed-h {
    /* border-bottom-width: 1px; */
    /* border-top-width: 1px; */
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    border: none;
    background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 200'%3E%3Cpath fill='lightblue' d='M0 92C217 193 304 8 500 109L500 0 0 0Z'%3E%3C/path%3E%3C/svg%3E);
}

Additionally, you may need to tweak the background-image.

Css code for .cropper-dashed.dashed-v:

.cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    left: 33.33333%;
    top: 0;
    width: 33.33333%;
    display: none;
}

As long as I see such a way to cropping image with grids.