CSS3魔法堂：CSS3濾鏡及Canvas、SVG和IE濾鏡替代方案詳解

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　

IE特有的濾鏡常常作爲CSS3各種新特性的降級處理補充，而Adobe轉向HTML5後與Chrome合作推出CSS3的Filter特性，因此當前僅Webkit內核的瀏覽器支持CSS3 Filter，而FF和IE10+則需要使用SVG濾鏡(svg effects for html)或Canvas作爲替代方案處理了，而IE5.5~9則使用IE濾鏡、JS+DIV或VML處理！本篇爲先佔個坑，以後慢慢填^_^！！！

CSS3 Filter兼容性表

SVG effect for HTML兼容性表

下文將探討以下濾鏡！

Speia濾鏡灰度圖濾鏡高斯模糊濾鏡反色濾鏡飽和度濾鏡

對比度濾鏡亮度濾鏡色相旋轉濾鏡陰影濾鏡

先P張原圖作參考系（清純MM哦！！）

二、Speia濾鏡(Speia)　　　　　　　　　　　　　　　　　　　　　　

Speia濾鏡是對圖片或元素整體進行棕褐色處理，就是老照片那種效果。下面直接看療效！

看，歲月的痕跡啊，是不是有媽媽年代的感覺呢？！

1. CSS3濾鏡實現

<style type="text/css">
  .sepia{
    /**  格式，filer: sepia(效果範圍)
     *  效果範圍，取值範圍爲0-1或0-100%；0表示無效果，1或100%表示最大效果
     */
    -webkit-filter: sepia(100%);  
    -moz-filter:sepia(100%);
    -o-filter: sepia(100%);
    -ms-filter: sepia(100%);
    filter: sepia(100%);  
  }
</style>
<div class="sepia" style="background:url(./mm.jpg)"></div>

2. IE5.5~9特的處理方式（待研究）

嘗試過IE濾鏡 filter:progid:XDImageTransform.Microsoft.MaskFilter(color=顏色) ，僅僅能使用gif圖片（其他格式的圖片將導致整個元素消失不見），而且遮罩層與圖片重合的部分將變爲空白一片，另外在IE11瀏覽器文檔模式爲5.5~9下濾鏡均失效（元素按照沒有設置濾鏡的方式被渲染顯示）。結論：IE濾鏡無法處理Sepia效果。

而通過js填坑方面，想法1：在元素表面附加一層半透明棕褐色的遮罩層，但效果與CSS3 Filter相距甚遠，失敗告終。。。。。。。

3. FF和IE10+的處理方式

可使用Canvas作處理，下面是簡單實現的代碼，目標元素 <img id="sepia" src="./mm.jpg"/>

// 定義處理方法
var sepia = function(el){
  var canvas = document.createElement('canvas');
  var w = canvas.width = el.offsetWidth,
        h = canvas.height = el.offsetHeight;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(el, 0, 0);
  
  // 對像素作處理
  var imgData = ctx.getImageData(0, 0, w, h), d = imgData.data;
  for (int i = 0, len = d.length; i < len; i+=4){
    var r = d[i],
         g = d[i+1],
         b = d[i+2];
    d[i] = (r * 0.393)+(g * 0.769)+(b * 0.189);
    d[i+1] = (r * 0.349)+(g * 0.686)+(b * 0.168);
    d[i+2] = (r * 0.272)+(g * 0.534)+(b * 0.131);
  }
  ctx.putImageData(imgData, 0, 0);

  // 導出
  var img = new Image();
  img.src = ctx.toDataURL("image/*");
  return img;
};

// 調用
var img = sepia(document.getElementById('sepia'));
document.body.appendChild(img);

三、灰度圖濾鏡(Grayscale)　　　　　　　　　　　　　　　　　　　　

灰度圖藝術範！

1. CSS3濾鏡的實現

<style type="text/css">
  .grayscale{
    /**  格式，filer: grayscale(效果範圍)
     *  效果範圍，取值範圍爲0-1或0-100%；0表示無效果，1或100%表示最大效果
     */
     -webkit-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);  
  }
</style>
<div class="grayscale" style="background:url(./mm.jpg)"></div>

2. IE5.5~9的實現

使用IE濾鏡： filter:gray;

3. FF和IE10+的處理方式

使用SVG effect for HTML的方式：

　　 grayscale.svg:

<svg xmlns="http://www.w3.org/2000/svg">  
 <filter id="grayscale">  
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>  
 </filter>  
</svg>

index.html:

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

可使用Canvas作處理，下面是簡單實現的代碼，目標元素 <img id="grayscale" src="./mm.jpg"/>

var grayscale = function(el){
  var canvas = document.createElement('canvas');
  var w = canvas.width = el.offsetWidth,
        h = canvas.height = el.offsetHeight;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(el, 0, 0);
  
  // 對像素作處理
  var imgData = ctx.getImageData(0, 0, w, h), d = imgData.data;
  for (int i = 0, len = d.length; i < len; i+=4){
    var r = d[i],
         g = d[i+1],
         b = d[i+2];
    d[i] = d[i+1] = d[i+2] = (r+g+b)/3;
  }
  ctx.putImageData(imgData, 0, 0);

  // 導出
  var img = new Image();
  img.src = ctx.toDataURL("image/*");
  return img;
};

// 調用
var img = grayscale(document.getElementById('grayscale'));
document.body.appendChild(img);

四、高斯模糊濾鏡(Blur)　　　　　　　　　　　　　　　　　　　　　　

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

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表示要模糊。

五、反色濾鏡(Inver)　　　　　　　　　　　　　　　　　　　　　　　　

經歷過膠圈年代的同學都熟悉哦！

1. CSS3濾鏡的實現

<style type="text/css">
  .invert{
    /**  格式，filer: invert(效果範圍)
     *  效果範圍，取值範圍0~1或0~100%，0爲無效果，1或100%表示最大效果
     */
     -webkit-filter: invert(1);
     -moz-filter: invert(1);
     -o-filter: invert(1);
     -ms-filter: invert(1);
     filter: invert(1); 
  }
</style>
<div class="invert" style="background:url(./mm.jpg)"></div>

2. IE5.5~9的實現（待研究）

3. FF和IE10+的實現

可使用Canvas作處理，下面是簡單實現的代碼，目標元素 <img id="invert" src="./mm.jpg"/>

var invert = function(el){
  var canvas = document.createElement('canvas');
  var w = canvas.width = el.offsetWidth,
        h = canvas.height = el.offsetHeight;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(el, 0, 0);
  
  // 對像素作處理
  var imgData = ctx.getImageData(0, 0, w, h), d = imgData.data;
  for (int i = 0, len = d.length; i < len; i+=4){
    var r = d[i],
         g = d[i+1],
         b = d[i+2];
    d[i] = 255 - r;
    d[i+1] = 255 - g;
    d[i+2] = 255 - b;
  }
  ctx.putImageData(imgData, 0, 0);

  // 導出
  var img = new Image();
  img.src = ctx.toDataURL("image/*");
  return img;
};

// 調用
var img = invert(document.getElementById('invert'));
document.body.appendChild(img);

六、飽和度濾鏡(Saturate)　　　　　　　　　　　　　　　　　　　　　　

暖暖的趕腳~~~！

1. CSS3濾鏡的實現

<style type="text/css">
  .saturate{
    /**  格式，filer: saturate(效果範圍)
     *  效果範圍，取值範圍>=0的數字或百分數，1爲無效果，0爲灰度圖
     */
     -webkit-filter: saturate(2);
     -moz-filter: saturate(2);
     -o-filter: saturate(2);
     -ms-filter: saturate(2);
     filter: saturate(2); 
  }
</style>
<div class="saturate" style="background:url(./mm.jpg)"></div>

2. IE5.5~9的實現（待研究）

3. FF和IE10+的實現（待研究）

七、對比度濾鏡(Contrast)　　　　　　　　　　　　　　　　　　　　　　　　

1. CSS3濾鏡的實現

<style type="text/css">
  .contrast{
    /**  格式，filer: contrast(效果範圍)
     *  效果範圍，取值範圍>=0的數字或百分數，1爲無效果
     */
     -webkit-filter: contrast(2);
     -moz-filter: contrast(2);
     -o-filter: contrast(2);
     -ms-filter: contrast(2);
     filter: contrast(2); 
  }
</style>
<div class="contrast" style="background:url(./mm.jpg)"></div>

2. IE5.5~9的實現（待研究）

3. FF和IE10+的實現（待研究）

八、亮度濾鏡(Brightness)　　　　　　　　　　　　　　　　　　　　　　

曝光過度哦！

1. CSS3濾鏡的實現

<style type="text/css">
  .brightness{
    /**  格式，filer: brightness(效果範圍)
     *  效果範圍，取值範圍>=0的數字或百分數，1爲無效果
     */
     -webkit-filter: brightness(2);
     -moz-filter: brightness(2);
     -o-filter: brightness(2);
     -ms-filter: brightness(2);
     filter: brightness(2); 
  }
</style>
<div class="brightness" style="background:url(./mm.jpg)"></div>

2. IE5.5~9的實現（待研究）

3. FF和IE10+的實現

　　可使用Canvas作處理，下面是簡單實現的代碼，目標元素 <img id="brightness" src="./mm.jpg"/>

// 原理：讓圖像變得更亮或更暗，算法將紅色通道、綠色通道、藍色通道，同時加上一個正值或負值。
var brightness = function(el, delta){
  var canvas = document.createElement('canvas');
  var w = canvas.width = el.offsetWidth,
        h = canvas.height = el.offsetHeight;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(el, 0, 0);
  
  // 對像素作處理
  var imgData = ctx.getImageData(0, 0, w, h), d = imgData.data;
  for (int i = 0, len = d.length; i < len; i+=4){
    var r = d[i],
         g = d[i+1],
         b = d[i+2];
    d[i] = r + delta;
    d[i+1] = g + delta;
    d[i+2] = b + delta;
  }
  ctx.putImageData(imgData, 0, 0);

  // 導出
  var img = new Image();
  img.src = ctx.toDataURL("image/*");
  return img;
};

// 調用
var img = brightness(document.getElementById('brightness', 10));
document.body.appendChild(img);

九、色相旋轉濾鏡(Hue Rotate)　　　　　　　　　　　　　　　　　　　　　　　　

詭異的趕腳~~

1. CSS3濾鏡的實現

<style type="text/css">
  .hue-rotate{
    /**  格式，filer: hue-rotate(效果範圍)
     *  效果範圍，取值範0deg~365deg，0（默認值）爲無效果
     */
     -webkit-filter: hue-rotate(200deg);
     -moz-filter: hue-rotate(200deg);
     -o-filter: hue-rotate(200deg);
     -ms-filter: hue-rotate(200deg);
     filter: hue-rotate(200deg); 
  }
</style>
<div class="hue-rotate" style="background:url(./mm.jpg)"></div>

2. IE5.5~9的實現（待研究）

3. FF和IE10+的實現（待研究）

十、陰影濾鏡(Drop Shadow)　　　　　　　　　　　　　　　　　　　　　

增加立體感！

1. CSS3濾鏡的實現

<style type="text/css">
  .drop-shadow{
    /**  格式，filer: drop-shadow(x-offset y-offset 陰影模糊半徑 陰影顏色)
     *  x-offset和y-offset爲陰影的相對於元素左上角的位移距離；
     * 注意：
     *     1. 陰影的外觀受border-radius樣式的影響；
     *     2. :after和:before等僞元素會繼承陰影的效果。
     */
     -webkit-filter: drop-shadow(5px 5px 0px #333);
     -moz-filter: drop-shadow(5px 5px 0px #333);
     -o-filter: drop-shadow(5px 5px 0px #333);
     -ms-filter: drop-shadow(5px 5px 0px #333);
     filter: drop-shadow(5px 5px 0px #333); 

     // 圓角
     border: solid 10px #e00;
     -webkit-border-radius: 10px;
  }
</style>
<div class="drop-shadow" style="background:url(./mm.jpg)"></div>

2. IE5.5~9的實現

在真實的IE5.5~9下可使用IE濾鏡（IE10+中文檔模式爲5.5~9則下列的IE濾鏡無效）：

/**
 * color爲陰影顏色，形如"#ff00cc"
 * direction爲角度，取值範圍0,45,90,135,180,225,270,315
 */
filter:Shadow(Color=color,Direction=direction);

/**
 * color爲陰影顏色，形如"#ff00cc"
 * offx爲水平偏移量
 * offy爲垂直偏移量
 * positive爲1或0
 */
filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive);

IE10+中文檔模式爲5.5~9時，則需要DIV+JS處理了。其中有一個jQuery插件：http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js

3. FF和IE10+的實現

通過CSS3新特新Box-Shadow處理， box-shadow: 投影方式(inset) X軸偏移量(x-offset) Y軸偏移量(y-offset) 陰影模糊半徑(blur-radius) 陰影擴展半徑(spread-radius) 陰影顏色(color) 。

投影方式(inset) ，可選屬性（默認爲外陰影），設置爲inset時表示內陰影。

X軸偏移量(x-offset) ，正值表示陰影位於對象的右邊，負值表示陰影位於對象的左邊。

Y軸偏移量(y-offset) ，正值表示陰影位於對象的底部，負值表示陰影位於對象的頂部。

陰影模糊半徑(blur-radius) ，可選屬性（默認爲0，沒有模糊效果），值範圍>=0。

陰影擴展半徑(spread-radius) ，可選屬性，正值表示陰影擴展，負值表示陰影縮小。

顏色(color) ，可選屬性(默認值又瀏覽器決定, Webkit內核的爲透明)。

注意：

　　　　1. 投影的外觀受到border-radius樣式的影響；

2. :after和:before等僞元素不繼承投影的效果。

十一、總結　　　　　　　　　　　　　　　　　　　　　　　　　　　　

上述內容僅僅對CSS3濾鏡和FF、IE下的替代方案作簡單的介紹，如有紕漏請各位指正，謝謝！

尊重原創，轉載請註明來自：http://www.cnblogs.com/fsjohnhuang/p/4127888.html ^_^肥仔John

十二、參考　　　　　　　　　　　　　　　　　　　　　　　　　　　　

http://blog.csdn.net/hfahe/article/details/7104496

http://www.yyjcw.com/html/News/793.html

http://www.hackbase.com/tech/2014-11-10/69684.html

http://blog.csdn.net/lujunql/article/details/6260643

http://www.cnblogs.com/shiyangxt/archive/2008/11/16/1334633.html

http://www.adobe.com/cn/devnet/html5/articles/css3-basics.html

http://www.educity.cn/jianzhan/630820.html

http://www.526net.com/blog/qianduan/226.html

http://www.zhangxinxu.com/wordpress/2013/11/%E5%B0%8Ftip-%E4%BD%BF%E7%94%A8css%E5%B0%86%E5%9B%BE%E7%89%87%E8%BD%AC%E6%8D%A2%E6%88%90%E6%A8%A1%E7%B3%8A%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C/

SVG

(applying-svg-effects-to-html-content)——http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html

Canvas

http://www.webclks.com/archives/829

http://www.w3school.com.cn/tags/canvas_getimagedata.asp

http://www.webhek.com/convert-canvas-image

CSS3魔法堂：CSS3濾鏡及Canvas、SVG和IE濾鏡替代方案詳解

android sdk manager無法更新

phoneGap中android程序自動更新代碼

android UI組件大全

智能手機屏幕尺寸和分辨率一覽表

android之保存全局變量

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結