CSS3濾鏡及Canvas

1、CSS3濾鏡及Canvas、SVG和IE濾鏡替代方案詳解一、前言     IE特有的濾鏡常常作為CSS3各種新特性的降級處理補(bǔ)充，而Adobe轉(zhuǎn)向HTML5后與Chrome合作推出CSS3的Filter特性，因此當(dāng)前僅 Webkit內(nèi)核的瀏覽器支持CSS3 Filter，而FF和IE10+則需要使用SVG濾鏡(svg effects for html)或Canvas作為替代方案處理了，而IE5.59則使用IE濾鏡、JS+DIV或VML處理！本篇為先占個坑，以后慢慢填_！  CSS3 Filter兼容性表    SVG eff

2、ect for HTML兼容性表    下文將探討以下濾鏡！  Speia濾鏡     灰度圖濾鏡     高斯模糊濾鏡     反色濾鏡     飽和度濾鏡       對比度濾鏡    亮度濾鏡        色相旋轉(zhuǎn)濾鏡 &

3、#160;    陰影濾鏡  先P張原圖作參考系（清純MM哦?。?    二、Speia濾鏡(Speia)  Speia濾鏡是對圖片或元素整體進(jìn)行棕褐色處理，就是老照片那種效果。下面直接看療效！     看，歲月的痕跡啊，是不是有媽媽年代的感覺呢？！   1. CSS3濾鏡實(shí)現(xiàn)<style type="text/css"> .sepia /* 格式，filer: sepia(效果范圍) * 效果范圍，取值范圍為0-1或0-1

4、00%；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.59特的處理

5、方式（待研究）      嘗試過IE濾鏡 filter:progid:XDImageTransform.Microsoft.MaskFilter(color=顏色) ，僅僅能使用gif圖片（其他格式的圖片將導(dǎo)致整個元素消失不見），而且遮罩層與圖片重合的部分將變?yōu)榭瞻滓黄?，另外在IE11瀏覽器文檔模式為5.59下濾鏡均失效（元素按照沒有設(shè)置濾鏡的方式被渲染顯示）。結(jié)論：IE濾鏡無法處理Sepia效果。      而通過js填坑方面，想法1：在元素表面附加一層半透明棕褐色的遮罩層，但效果與CSS3 Filter相距甚遠(yuǎn)

6、，失敗告終。    3. FF和IE10+的處理方式      可使用Canvas作處理，下面是簡單實(shí)現(xiàn)的代碼，目標(biāo)元素 <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.

7、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 = di, g = di+1, b = di+2; di = (r * 0.393)+(g * 0.769)+(b * 0.189); di+1 = (r * 0.349)+(g * 0.686)+(b

8、 * 0.168); di+2 = (r * 0.272)+(g * 0.534)+(b * 0.131); ctx.putImageData(imgData, 0, 0); / 導(dǎo)出 var img = new Image(); img.src = ctx.toDataURL("image/*"); return img;/ 調(diào)用var img = sepia(document.getElementById(sepia);document.body.appendChild(img); 三、灰度圖濾鏡(Grayscale)  灰度圖藝術(shù)范！ &

9、#160;  1. CSS3濾鏡的實(shí)現(xiàn)<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%); </

10、style><div class="grayscale" style="background:url(./mm.jpg)"></div>   2. IE5.59的實(shí)現(xiàn)     使用IE濾鏡： filter:gray;    3. FF和IE10+的處理方式      使用SVG effect for HTML的方式：  grayscale.svg:<svg xmlns="

11、/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:<s

12、tyle type="text/css">.grayscale filter:url(./grayscale.svg#grayscale);</style><div class="grayscale" style="background:url(./mm.jpg)"></div>     可使用Canvas作處理，下面是簡單實(shí)現(xiàn)的代碼，目標(biāo)元素 <img id="grayscale" src="./mm.jp

13、g"/> 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

14、 (int i = 0, len = d.length; i < len; i+=4) var r = di, g = di+1, b = di+2; di = di+1 = di+2 = (r+g+b)/3; ctx.putImageData(imgData, 0, 0); / 導(dǎo)出 var img = new Image(); img.src = ctx.toDataURL("image/*"); return img;/ 調(diào)用var img = grayscale(document.getElementById(grayscale);document.body.

15、appendChild(img); 四、高斯模糊濾鏡(Blur)   高斯模糊讓我想起忘了戴眼鏡上街的情景*!     1. CSS3濾鏡的實(shí)現(xiàn)<style type="text/css"> .blur /* 格式，filer: blur(模糊半徑) * 模糊半徑，取值范圍0Npx，0為無效果 */ -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter:

16、 blur(1px); </style><div class="blur" style="background:url(./mm.jpg)"></div>       2. IE5.59的實(shí)現(xiàn)       使用IE濾鏡：  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);  ,該方式在IE11中文檔

17、模式為5.59均起作用。    3. FF和IE10+的實(shí)現(xiàn)  使用SVG effect for HTML的方式：       blur.svg:<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-/W3C/DTD SVG 1.1/EN" "/Graphics/SVG/1.1/DTD/svg11.dtd&qu

18、ot;><svg version="1.1" xmlns="/2000/svg" xmlns:xlink="/1999/xlink" xmlns:ev="/2001/xml-events" baseProfile="full"> <defs> <filter id="blur"> <feGaussianBlur stdDeviatio

19、n="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="tex

20、t/css">.blur filter: url(blur.svg#blur);</style><div class="blur" style="background:url(./mm.jpg)"></div>           index.html(IE10+下，IE10+不支持直接在樣式表對元素應(yīng)用SVG濾鏡)：<style type="text/css">.blur background-iam

21、ge: url(blur.svg);</style><div class="blur"></div>     使用Canvas作處理，高斯模糊的算法請參考：阮老師的“高斯模糊的算法”參考譯文，處理庫StackBlur.js。    處理庫API： stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel ); · sourceImageID表示要模糊的圖片的id,

22、默認(rèn)這個圖片要隱藏；· targetCanvasID表示要顯示模糊圖片的canvas元素的id;· radius表示模糊的半徑大小。不過，根據(jù)我的對比測試，radius好像與CSS中filter濾鏡的模糊值不是1:1匹配的，反倒是有些類似2:1. 也就是這里的20px的半徑模糊近似于CSS中blur濾鏡值設(shè)置為10px;· blurAlphaChannel為布爾屬性，表示aplha透明通道是否要模糊，true表示要模糊。 五、反色濾鏡(Inver)  經(jīng)歷過膠圈年代的同學(xué)都熟悉哦！    1. CSS3濾

23、鏡的實(shí)現(xiàn)<style type="text/css"> .invert /* 格式，filer: invert(效果范圍) * 效果范圍，取值范圍01或0100%，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="backgr

24、ound:url(./mm.jpg)"></div>   2. IE5.59的實(shí)現(xiàn)（待研究）   3. FF和IE10+的實(shí)現(xiàn)           可使用Canvas作處理，下面是簡單實(shí)現(xiàn)的代碼，目標(biāo)元素 <img id="invert" src="./mm.jpg"/> var invert = function(el) var canvas = document.

25、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 = di, g = di+1,

26、b = di+2; di = 255 - r; di+1 = 255 - g; di+2 = 255 - b; ctx.putImageData(imgData, 0, 0); / 導(dǎo)出 var img = new Image(); img.src = ctx.toDataURL("image/*"); return img;/ 調(diào)用var img = invert(document.getElementById(invert);document.body.appendChild(img); 六、飽和度濾鏡(Saturate)  暖暖的趕腳！ 

27、   1. CSS3濾鏡的實(shí)現(xiàn)<style type="text/css"> .saturate /* 格式，filer: saturate(效果范圍) * 效果范圍，取值范圍>=0的數(shù)字或百分?jǐn)?shù)，1為無效果，0為灰度圖 */ -webkit-filter: saturate(2); -moz-filter: saturate(2); -o-filter: saturate(2); -ms-filter: saturate(2); filter: saturate(2); </style><div class

28、="saturate" style="background:url(./mm.jpg)"></div>   2. IE5.59的實(shí)現(xiàn)（待研究）   3. FF和IE10+的實(shí)現(xiàn) （待研究） 七、對比度濾鏡(Contrast)       1. CSS3濾鏡的實(shí)現(xiàn)<style type="text/css"> .contrast /* 格式，filer: contrast(效果范圍) *

29、效果范圍，取值范圍>=0的數(shù)字或百分?jǐn)?shù)，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.59的實(shí)現(xiàn)（待研究） 

30、  3. FF和IE10+的實(shí)現(xiàn) （待研究） 八、亮度濾鏡(Brightness)   曝光過度哦！    1. CSS3濾鏡的實(shí)現(xiàn)<style type="text/css"> .brightness /* 格式，filer: brightness(效果范圍) * 效果范圍，取值范圍>=0的數(shù)字或百分?jǐn)?shù)，1為無效果 */ -webkit-filter: brightness(2); -moz-filter: brightness(2); -o-filter: bri

31、ghtness(2); -ms-filter: brightness(2); filter: brightness(2); </style><div class="brightness" style="background:url(./mm.jpg)"></div>   2. IE5.59的實(shí)現(xiàn)（待研究）   3. FF和IE10+的實(shí)現(xiàn)  可使用Canvas作處理，下面是簡單實(shí)現(xiàn)的代碼，目標(biāo)元素 <img id="brig

32、htness" src="./mm.jpg"/> / 原理：讓圖像變得更亮或更暗，算法將紅色通道、綠色通道、藍(lán)色通道，同時加上一個正值或負(fù)值。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.drawIm

33、age(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 = di, g = di+1, b = di+2; di = r + delta; di+1 = g + delta; di+2 = b + delta; ctx.putImageData(imgData, 0, 0); / 導(dǎo)出 var img = new Image(); img.src = ctx.toDat

34、aURL("image/*"); return img;/ 調(diào)用var img = brightness(document.getElementById(brightness, 10);document.body.appendChild(img); 九、色相旋轉(zhuǎn)濾鏡(Hue Rotate)  詭異的趕腳   1. CSS3濾鏡的實(shí)現(xiàn)<style type="text/css"> .hue-rotate /* 格式，filer: hue-rotate(效果范圍) * 效果范圍，取值范0deg36

35、5deg，0（默認(rèn)值）為無效果 */ -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>  

36、 2. IE5.59的實(shí)現(xiàn)（待研究）   3. FF和IE10+的實(shí)現(xiàn) （待研究） 十、陰影濾鏡(Drop Shadow)    增加立體感！   1. CSS3濾鏡的實(shí)現(xiàn)<style type="text/css"> .drop-shadow /* 格式，filer: drop-shadow(x-offset y-offset 陰影模糊半徑 陰影顏色) * x-offset和y-offset為陰影的相對于元素左上角的位移距離； * 注意： * 1. 陰

37、影的外觀受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.59的實(shí)現(xiàn)      在真實(shí)的IE5.59下可使用IE濾鏡（IE10+中文檔模式為5.59則下列的IE濾鏡無效）：/* * color為陰