高斯濾鏡模糊CSS3

http://www.cnblogs.com/fsjohnhuang/p/4127888.html#a3

 

 高斯模糊讓我想起忘了戴眼鏡上街的情景*~*!

   

  1. CSS3濾鏡的實現

<style type="text/css"> .blur{ /** 格式，filer: blur(模糊半徑) * 模糊半徑，取值范圍0~Npx，0為無效果 */ -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); } </style> <div class="blur" style="background:url(./mm.jpg)"></div>

     

  2. IE5.5~9的實現

       使用IE濾鏡：  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);  ,該方式在IE11中文檔模式為5.5~9均起作用。

  

  3. FF和IE10+的實現 

 　　使用SVG effect for HTML的方式：

　　       blur.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="./mm.jpg" x="0" y="0" height="200" width="200" filter="url(#blur)"/> </svg>

            index.html(FF下)：

<style type="text/css"> .blur{ filter: url(blur.svg#blur); } </style> <div class="blur" style="background:url(./mm.jpg)"></div>

           index.html(IE10+下，IE10+不支持直接在樣式表對元素應用SVG濾鏡)：

<style type="text/css"> .blur{ background-iamge: url(blur.svg); } </style> <div class="blur"></div>

 

    使用Canvas作處理，高斯模糊的算法請參考：阮老師的“高斯模糊的算法”參考譯文，處理庫StackBlur.js。

    處理庫API： 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表示要模糊。