I want to build an image cropper and I need help

Hello programmers,

I want to build an image cropper and I am on my first step ...

Some image croppers have transparent box on the selected area while the rest is dark.

How do you accomplish this effect?

 

Hi

There is a couple ways this is done.

A technique ive seen a few times is to use a box-shadow. You create a DIV which houses the image. Then have a separate DIV which has absolute positioning and you give it a very large box shadow so much so that its shadow does not fade around the DIV. You house both DIV within another DIV and set it so it does not overflow and that gives you a darkened area with a highlighted section.

My second choice is using masks. You set a DIV which houses the background image then apply a filter or use another DIV overlay to darken the image. Then create an IMG tag with the same image. Give this IMG tag absolute positioing and apply a mask to it to cut out the bit you want to highlight. This will then give you the ending result youre looking for!!

Ive attached example code as sometimes seeing is easier than explaining. Replace !image! in the CSS and IMG with what image you want to test with.

.cropper-parent, .cropper-parent-mask {
        display: inline-block;
        margin-right: 10px;
        width: 300px;
        height: 300px;
        position: relative;
        overflow: hidden;
}

.cropper-parent .cropper-image, .cropper-parent-mask .cropper-image {
        width: 100%;
        height: 100%;
        position: absolute;
        background: url(!image!) no-repeat;
        }

.cropper-parent .cropper-overshadow {
        box-shadow: 0px 0px 500px 500px rgba(0, 0, 0, 0.5);
        border: 2px solid white;
        width: 100px;
        height: 50px;
        position: absolute;
        top: 20px;
        left: 20px;
}

.cropper-parent-mask .cropper-image {
        filter:brightness(50%);
        }

.cropper-parent-mask .cropper-image-mask {
        position: absolute;
        clip: rect(20px, 120px, 70px, 20px);
        background: url(!image!) no-repeat;
}

Code (CSS):

<div class="cropper-parent">
        <div class="cropper-image"></div>
        <div class="cropper-overshadow"></div>
</div>

<div class="cropper-parent-mask">
        <div class="cropper-image"></div>
        <img src="!image!" class="cropper-image-mask"></div>
</div>

HTML: