Best way to mask an image in HTML5 - html

Question

I was wondering what is the best way to mask images in HTML 5 ?
In fact I would like to display circle thumbnails in a gallery without bothering my client with the preparation of the circular pictures...
So I have, in my opinion, two options : Canvas masking or old fashioned way
Do you have others ideas ? Best practices ?
Thanks

Answer 1

you could use
the old fashioned way - by using a transparent png on top of the desired element
the css3 border-radius of the image set to half of it's dimensions (so that the border defines a circle)
the css3 mask and mask-clip properties (here's a nice demo : http://www.webkit.org/blog/181/css-masks/)
canvas to do the masking
svg circles with the image as background-pattern
The choice depends on the targeted browsers and the time you want to invest.
For a fully cross-browser result, I recommend the old fashioned way, but if you want more shapes (maybe dynamic ones) or more than just image masking, you could try svg or canvas.

Answer 2

-circle {
-webkit-border-radius: 61px;
-moz-border-radius: 61px;
border-radius: 61px;
border:1px solid #aaaaaa;
width:122px;
height:122px;
}
see this
check this http://jsfiddle.net/WQSLa/1/
EDIT
u can also try this http://jsfiddle.net/jalbertbowdenii/WQSLa/3 as suggested by albert

Answer 3

Here's the method that works best for me:
create an SVG of the shape of mask you want.
edit the css of the appropriate element and specify the URL of the SVG for the mask
For a 200px circle, your SVG could look like this:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="image-mask" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<circle cx="100" cy="100" r="100" stroke="black" stroke-width="0" fill="black" />
</svg>
And your CSS could look like this:
#image-mask {
width: 200px;
height: 200px;
mask: url('/static/images/avatarmask.svg');
-webkit-mask-image: url('/static/images/avatarmask.svg');
}
And if you want something more in-depth, I found this guide to be very helpful: http://collidercreative.com/how-to-create-css-image-masks-for-the-web-with-svgs/.

Answer 4

To update the answer, try clip-path (see this css-tricks post).
caniuse shows over 80% support now, if you use the -webkit- prefix as well. So this is working for me (IE/Edge, though, may be limiting factors):
clip-path: circle(125px at center);
-webkit-clip-path: circle(125px at center);