(HTML)- 將圖片轉為黑白的方法
(HTML)- 將圖片轉為黑白的方法
如果不知如何在 HTML 語法中，將圖片轉為黑白，可看此篇文章。
一、使用 CSS 程式碼：( 全圖片 )
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
二、使用 JavaScript 程式碼：( 單擊轉換圖片 )
<html>
<head> </head>
<body>
<button onclick="myFunction()">Try it</button>
<br>
<br>
<img src="3hsf46.jpg" alt="Apple" width="300" height="300">
<script>
function myFunction() { document.getElementById("myImg").style.filter = "grayscale(100%)"; }
</script>
</html>
三、使用 SVG 濾鏡：
3.1 定義灰色濾鏡，gray.svg：
新建一個空白文字檔案，如：gray.txt。拷貝進去如下的 XML 程式碼，然後修改檔名 .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>
PS：version=”1.1″ 不用也可以。
3.2 在 HTML 中引用，並定義 CSS
html { filter:url('gray.svg#grayscale'); }
PS：/* 灰度濾鏡放在 gray.svg 文件的 id 叫做 grayscale 的濾鏡裡 */
3.3 如果 gray.svg 是內嵌在 HTML 中，則：
使用如下 CSS 呼叫程式碼
html {
filter: url('#grayscale');
}
3.4 如果是 CSS 直接引用 SVG，則：
html { filter: url('url("data:image/svg+xml;utf8, <svg%20xmlns = 'http://www.w3.org/2000/svg'> <filter%20id = 'grayscale'> <feColorMatrix%20type = 'matrix'%20values = '0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333% 200.3333%200%200%200%200%200%201%200'/> </filter> </svg>#grayscale");') }
三、IE 瀏覽器：
filter: gray;
四、引用 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. 跨域。安全性機制，無法轉換跨域的圖片為黑白色。
五、用於 IE10、11 的補充：
5.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>
5.2 整個頁面灰度怎麼處理
使用灰色層覆蓋，為了防止影響點擊，可以使用outline，或者box-shadow屬性實現。
例如，頁面插入這麼一段 HTML：
<div style="position:fixed;z-index:999;width:100vw; height:100vh; left:-100vw; outline: 101vw solid rgba(100,100,100,.7);">
</div>
層級還有透明度，或者顏色都可以試試。
JS代碼：
document.body.insertAdjacentHTML
('afterbegin', '<div style="position:fixed;z-index:999;width:100vw; height:100vh; left:-100vw; outline: 101vw solid rgba(100,100,100,.7);"></div>');
免責聲明：
1.本影像檔案皆從網上搜集轉載，不承擔任何技術及版權問題。
2.如有下載連結僅供寬頻測試研究用途，請下載後在24小時內刪除，請勿用於商業。
3.若侵犯了您的合法權益，請來信通知我們，我們會及時刪除，給您帶來的不便，深表歉意。