透明背景狀況下遮罩出不規則圖片

咱們在處理圖片，好比用戶頭像的時候，一般上傳的都是矩形圖片
例如：

有時候根據設計師的需求，會要求是圓形或者帶圓角，這時候咱們一般使用css border-radius來達到這一效果：

css.avatar {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
}
.avatar > img {
    width: 100%;
    height: 100%;
}

可是此次遇到的一個需求是，圖片要不規則顯示出來，設計稿中是這樣的

好咱們來想可能辦法，整體思路是遮罩，難點是遮罩出的圖片是不規則，要有白色邊框，背景透明。

1. 使用png透明蒙版
2. css shape、clip等
3. 在四個角畫三角形來遮罩出六邊形
4. canvas
5. svg

咱們來一一試驗：

使用png透明蒙版

若是純色背景還能夠，可是背景要求透明的，因此第一種看樣子不大可能了。

css shape、clip等

css-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

這樣確實能夠畫出來六邊形，背景也能夠是透明，若是仔細研究還有可能畫出白色的邊框可是

這樣畫出來是徹底的標準六邊形，而設計稿是帶設計師傲嬌的圓角的，顯然不符合精準還原。
http://jsfiddle.net/chromefans/30oepvhz/3/embedded/

在四個角畫三角形來遮罩出六邊形

這樣也確實能夠畫出六邊形，可是實現出來效果和css shape同樣，標準六邊形，只是兼容性要好一些。

canvas

我這裏沒作canvas的demo，就不演示了，若是實在沒有完美的方式，就回來用canvas。

svg

好的，終於碼到這裏了……
在通過一系列研究探討以後，發現了這篇文章
http://www.html5rocks.com/en/tutorials/masking/adobe/
文中很巧妙的實現了在不規則狀況下顯示圖片，還能夠透明背景，在查閱mdn後，還原了設計稿。

還原一下步驟，這個方式須要設計師配合導出一個處理好透明區域的svg，在使用-webkit-mask-box-image方法把svg當作蒙版，這時輸出的圖片已是六邊形的了。
那白色邊框怎麼辦？
既然頭像大小是固定的，渲染出來六邊形也是固定的，那就。

切一個蓋在上面吧。

demo：
http://jsfiddle.net/chromefans/p3t6pdqe/1/embedded/