1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

I want to build an image cropper and I need help

Discussion in 'Programming' started by FarrisFahad, Jan 30, 2019.

  1. #1
    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?
    SEMrush
     
    FarrisFahad, Jan 30, 2019 IP
    SEMrush
  2. Tom-Brown

    Tom-Brown Well-Known Member

    Messages:
    105
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    110
    #2
    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:
     
    Tom-Brown, Mar 18, 2019 IP