2

I am making a page on my mobile app that can crop images.

What I'd like to do is have a div overlayed on top of my image. This div will have a box within it, and that box should be transparent so that you can see the part of the image you want to keep. Outside the box, I want the image to be shaded.

This image below is an example of what I want to do, except instead of the fancy border I can just have a regular border.

Is this possible with css or javascript?

(Ps I know the below is a software program, but just imagine the picture is html and that's what i'm trying to accomplish) http://agateau.com/2007/crop-this/20070726-crop.png

Terence Chow
  • 10,755
  • 24
  • 78
  • 141

2 Answers2

1

Your best bet is to prob use 4 divs with an rgba(0,0,0,.5) all around the region

qwertymk
  • 34,200
  • 28
  • 121
  • 184
0

Very interesting question but unfortunately there is no easy way of doing it using HTML/CSS. There are several proposed solutions which you can find with bit of googling like this one Make part of a image transparent but i couldnt really understand that solution.

So how i'd go on about this and probably the simplest solution would be to initially have all the image greyed out (low opacity) then when the user draws the div on top of it by giving x, y, width, height.. then in that div, display the cropped part of that same image with normal opacity using the values of x, y, width and height.. you can get the exact part of the image to be displayed in the div. For this purpose, the following thread will help you:

CSS Display an Image Resized and Cropped

Idk how useful this method will be but that's one way to do it or atleast i'd do it that way.

Community
  • 1
  • 1
Abdul Jabbar
  • 2,573
  • 5
  • 23
  • 43