使用CSS將圖片轉換成黑白的

時代發展，如今，CSS3的逐步推進，我們也開始看到“黑白效果”大規模應用於實際的可能,接下來介紹CSS3 greyscale 濾鏡實現，感興趣的朋友可以瞭解下可能早就知道，像汶川這種糟糕的日子網站全灰在IE下是可以輕鬆實現的(filter: gray;)，不過，當時，其他瀏覽器是無解的。不過，時代發展，如今，CSS3的逐步推進，我們也開始看到“黑白效果”大規模應用於實際的可能。

CSS3 greyscale 濾鏡實現
如下測試代碼：

代碼如下:

.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }

HTML代碼：

代碼如下:

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

如果你手上的瀏覽器是Chrome18+, 您可以狠狠地點擊這裡：CSS3 greyscale 濾鏡與照片黑白
可以看到類似文章一開始展示的黑白對比。
其他些瀏覽器，如FireFox很快就會跟上實現。當然，要實現（比方說）FireFox 4瀏覽器上照片變黑白的效果，也是可以的。可以使用SVG的灰階濾鏡效果。
SVG濾鏡實現
我們建立一個空白文字檔，比如說：gray.txt. 拷貝進去如下的XML代碼：

代碼如下:

<svg version="1.1" 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>

然後，修改尾碼.txt → .svg. 然後就可以調用了~~

如下CSS調用代碼：
filter: url(gray.svg#grayscale);然後，效果就出來了。如果你手上的瀏覽器是FireFox4+，您可以狠狠地點擊這裡：SVG濾鏡實現照片黑白demo
別忘了IE瀏覽器
IE下實現上面已經提過，就是：
filter: gray;至少IE7~9都是支援的。最近較懶，IE6懶得去測，支援與否不知。經驗來看，應該是支援的。
我需要一個一統江山的方法
一統江山（完全相容），如果單純想通過CSS，也是可以的，你所要做的就是：天天拿個魚竿去黃浦江釣魚，年複一年，日複一日……然後，兩年後，只要兩年，把上面兩個demo頁面F5一下，就可以了！很簡單吧！
如果嫌上面的做法過於倫敦，且你也不是一根筋，到是有個一統江山的方法，不過不是CSS的乾貨，一個貌似有點名氣的Greyscale.js。
用法很簡單，引用JavaScript檔案，如下：
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>然後，一句話：
grayscale(document.getElementById("thisImage"));或DOM元素集：
grayscale(document.getElementsByTagName("img"));如果你喜歡使用jQuery，還可以使用：
grayscale($("#thisImage"));很簡單吧。
實現原理：IE瀏覽器下是添加灰階濾鏡，這個大家都懂的。其他瀏覽器貌似使用Canvas中的getImageData方法，然後對每個像素點進行灰階轉換~~
因此，在現代瀏覽器下，對於該方法，圖片的灰階處理有兩個局限性：
1. 速度。300*300這張一般般大小的圖片變灰就要數秒之久；
2. 跨域。安全性機制，無法轉換跨域的圖片為黑白色。