使用CSS將圖片轉換成模糊(毛玻璃)效果

本文很單純，就是圖片模糊效果的實現。

CSS3 blur濾鏡實現

以下測試代碼：

.blur {    
    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);    
}

相關HTML代碼以下：

<img src="mm1.jpg" />
<img src="mm1.jpg" class="blur" />

若是你手上的瀏覽器是下圖綠色所示：

您能夠狠狠地點擊這裏：CSS3 blur濾鏡與照片模糊

能夠看到相似文章一開始展現的模糊對比效果圖。

其餘些瀏覽器，如FireFox到目前尚未支持CSS3 filter. 固然，要實現（比方說）FireFox 24瀏覽器上照片變模糊的效果，也是能夠的。能夠使用SVG的模糊濾鏡。

SVG濾鏡實現

無論倒騰什麼方法，搞一個代碼以下，且全名爲blur.svg的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" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"     
     baseProfile="full">	 
    <defs>
        <filter id="blur">
            <feGaussianBlur stdDeviation="10" />
        </filter>
    </defs>
</svg>

上面代碼紅色高亮的就是添加的濾鏡代碼（其餘代碼Dreamweaver自動生成，其實，只要一行就夠了~）。

以下CSS調用代碼：

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

而後，效果就出來了。若是你手上的瀏覽器是FireFox25-，您能夠狠狠地點擊這裏：SVG濾鏡實現照片模糊demo

IE10以及IE11以及之後的IE11+都是支持SVG的濾鏡的，可是，此demo在這些瀏覽器下是無效的，爲什麼？

好像由於其不支持直接在CSS使用使用filter: url的寫法，其實，要想實現IE10, IE11下的模糊效果，也是能夠，就是適用性差了點，圖片要寫入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" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"     
     baseProfile="full">
     <defs>
        <filter id="blur">
            <feGaussianBlur stdDeviation="10" />
        </filter>
    </defs>
    <image xlink:href="mm1.jpg" x="0" y="0" height="191" width="265" filter="url(#blur)" /> </svg>

而後，SVG做爲背景圖片載入：

.blur {
    background-image: url(blur.svg);
}

就能夠哈~~

別忘了IE瀏覽器

IE6?-IE9瀏覽器能夠藉助IE filter模糊濾鏡實現，以下CSS：

/* IE6?~IE9 IE6未親自測試，按照本身之前使用該濾鏡實現投影效果的經驗，IE6應該是支持的*/
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); 

因而乎，上面一圈走來，全部主流瀏覽器都露了臉，都有實現圖片模糊效果的可能。

因而，就此大綜合一下：

.blur {	
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    
    -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */ }

至於IE10, IE11瀏覽器，高不成低不就的雞肋，咋就不說什麼了吧~ 若是你執着於這兩塊雞大排，能夠試試canvas.

canvas大統江山

Canvas中的有個getImageData方法，能夠獲取每一個圖片像素點的信息，咱們就能夠根據特定的算法，對這些信息點進行轉化，就能使用各類圖片特效。例如，置灰效果，例如反差效果，或者是一些複雜的圖像混合效果（算法見下）：

或者這裏要介紹的模糊效果（高斯模糊）。

關於「高斯模糊的算法」能夠參見阮老師的「高斯模糊的算法」參考譯文，涉及正態分佈。可見，就算是搞設計的，或者是折騰CSS, 也是對數學頗有要求的哈。

對於canvas的高斯模糊，確定有前輩已經寫過相關的方法了，我搜了下，這個JS還算蠻不錯的，StackBlur.js，該JS的原demo地址是：http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

該方法能夠實現圖片的高斯模糊效果，不依賴其餘任何JS框架，通常用法以下：

stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel );

其中：

• sourceImageID表示要模糊的圖片的id, 默認這個圖片要隱藏；
• targetCanvasID表示要顯示模糊圖片的canvas元素的id;
• radius表示模糊的半徑大小。不過，根據個人對比測試，radius好像與CSS中filter濾鏡的模糊值不是1:1匹配的，反卻是有些相似2:1. 也就是這裏的20px的半徑模糊近似於CSS中blur濾鏡值設置爲10px;
• blurAlphaChannel爲布爾屬性，表示aplha透明通道是否要模糊，true表示要模糊。

因而，藉助此JS文件，咱們能夠實現IE9+瀏覽器下的圖片模糊效果了，至於IE6~IE8，繼續使用IE私有的filter模糊濾鏡，因而，江山一統，歌舞昇平！

您能夠狠狠地點擊這裏：IE CSS模糊濾鏡+canvas高斯模糊實現圖片模糊demo

因而，雞肋的IE11瀏覽器立馬變成雞大腿啦~~

Alexander Mankuta在今年也寫過一個實現canvas的模糊濾鏡方法，其最大的特色在於，能夠控制特定圖片區域的模糊，例如，中間清晰，四周模糊；或者上下模糊，中間清晰。效果圖以下：

您有興趣能夠點擊這裏查看學習。