小tip: 使用CSS將圖片轉換成黑白(灰色、置灰)

標籤：

可能早就知道，像汶川這種糟糕的日子網站全灰在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. 跨域。安全性機制，無法轉換跨域的圖片為黑白色。

您可以狠狠地點擊這裡：Greyscale.js照片變灰相容性實現demo

跟上面的一致，略。

補充於2015年12月21日
很多人郵件問，IE10, IE11這兩個高不成低不就的瀏覽器怎麼辦？

我個人都是藉助SVG實現（專門為IE10-IE12）的，講毛半透明效果的時候有類似實現。

1. 頁面載入（可以請求載入，或者直接放在HTML代碼中）上面gray.txt對應的SVG檔案，也就是：

<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>

2. 然後將圖片轉為SVG圖片引用，filter屬性值指向grayscale(上面紅色的id值)。例如

<svg>    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="zxx.jpg" x="0" y="0" width="256" height="190" filter="url(‘#grayscale‘)"></image></svg>

over~

小tip: 使用CSS將圖片轉換成黑白(灰色、置灰)