I am working on an image cropper. And I am on the first stages. I want to know how to create the the two divs over the image, one is transperent while the other acts as a mask.
Can this be done with CSS? Or should I consider jQuery?
This is what I want to accomplish ...
I just want to know how to create this overlay image feature.
Your image looks to me as if it was Javascript such as http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/
How do you make the whole image with black transperent and the selected part has no opacity?
You supplied your example. It looks to me to be exactly this: http://www.defusion.org.uk/wp-content/uploads/2006/08/screenshot_thumb.jpg
Seems you have a match.
There's no way to do this only with HTML & CSS. You'll need to throw some JS into the mix. There are loads of plugins (jQuery or pure JS) that you can find with a Google search.
Here's for example one made with pure JS. It's a modern one which is therefore also responsive and it has touch support.
https://jcrop.com/examples/
Thank you guys for the help :)
I have another question ...
How do they make part of the image transparent while the rest is darkened?
Are they using HTML5 Canvas? I want to accomplish this effect.
If you look with the developer tools of your browser you can see in that jcrop example how it's made of. The dark area are a bunch of divs added dynamically with JS and it calculates the width and hight distances of the crop area. Anyway there's probably a lot going on behind the scenes to get the desired effect, so my question is why do you want to make this image cropper yourself?
I want to learn how to do things myself using jQuery. I am doing it just to learn nothing more.
Ah ok, good for you! If you wanna learn then look at the many cropper plugins out there via the browsers' DevTools to see how they did it. You can also use JS debugger in DevTools to see which functions or lines of JS gets triggered by all the events (click, mouseenter, etc.). In Chrome DevTools it's the 'Sources' tab.
Thanks I will do that :)
You can use your own custom image as a mask for cropping by adding an overlay and using the 'cutter' transformation flag. ... For example, the following PNG image was uploaded to Cloudinary with the 'hexagon_sample' public ID. ... The mask image can be a semi-transparent PNG file to make ...
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.
