HTML5中遮罩图像的最佳方法

Question

我想知道在HTML 5中遮罩图像的最佳方法是什么?

实际上，我希望在画廊中显示圆形缩略图，而不会让客户费心准备圆形图片...

所以，在我看来，我有两个选择：Canvas masking或老派的方法

你有其他的想法吗？最佳实践？

谢谢

- Nypam

---

我的回答有帮到您吗？如果有的话，请投票选我为正确答案。 - aWebDeveloper

Answer 1

您可以使用以下方法来实现元素的圆形遮罩：

• 传统方法 - 在所需元素上方使用透明 PNG 图片
• 使用 CSS3 border-radius 属性，将图像的值设置为其尺寸的一半（使边框定义一个圆形）
• 使用 CSS3 mask 和 mask-clip 属性（这里有一个不错的演示：http://www.webkit.org/blog/181/css-masks/）
• 使用 Canvas 进行遮罩处理
• 使用 SVG 圆形，并将图像作为背景模式

选择哪种方法取决于目标浏览器和您希望投入的时间。如果要实现跨浏览器的效果，我建议使用传统方法，但是如果您想要更多的形状（也许是动态的）或者除了图像遮罩之外的效果，您可以尝试使用 SVG 或 Canvas。

- gion_13

---

CSS3遮罩只适用于WebKit浏览器。 - tomsseisums

当然，我想要一个跨浏览器兼容的结果。毕竟，我会在最后动画呈现遮罩和圆圈大小，因此我认为使用CSS3 border-radius 是最合适的技术，你觉得呢？ - Nypam

@gion_13 很好的选项总结，但如果您包含细节（例如提供链接或代码，展示如何执行每个选项，例如使用globalCompositeOperation遮罩drawImage），那么这将是一个很棒的答案。 - Phrogz

Answer 2

  -circle {
        -webkit-border-radius: 61px;
        -moz-border-radius: 61px;
        border-radius: 61px;
        border:1px solid #aaaaaa;
        width:122px;
        height:122px;
   }

看这个

检查这个http://jsfiddle.net/WQSLa/1/

编辑

您也可以尝试这个http://jsfiddle.net/jalbertbowdenii/WQSLa/3，如Albert所建议的那样。

- aWebDeveloper

---

或将其放在img上而非div http://jsfiddle.net/jalbertbowdenii/WQSLa/3/ - albert

Answer 3

要更新答案，请尝试使用clip-path（请参见this css-tricks post）。

caniuse现在显示超过80%的支持率，如果您同时使用-webkit-前缀。所以这对我来说是有效的（IE/Edge可能是限制因素）：

clip-path: circle(125px at center);
-webkit-clip-path: circle(125px at center);

- dhc

Answer 4

这是我觉得最好的方法：

1. 创建一个所需蒙版形状的SVG。
2. 编辑相应元素的CSS，并指定SVG的URL以进行遮罩处理。

例如，对于一个直径为200像素的圆，您的SVG可能如下所示：

<?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>

而你的 CSS 可能长这样：

#image-mask {
    width: 200px;
    height: 200px;
    mask: url('/static/images/avatarmask.svg');
    -webkit-mask-image: url('/static/images/avatarmask.svg');
}

如果你想了解更深入的内容，我发现这篇指南非常有帮助：http://collidercreative.com/how-to-create-css-image-masks-for-the-web-with-svgs/。

- Ryan Shea

---

关于您提供的示例，CSS 是否应该应用于图像？即：<img src="/images/myimage.jpg" id="image-mask">。 - T3.0