將圖片轉換成黑白(灰色、置灰)

時間 2019-11-16

標籤圖片轉換黑白灰色简体版

原文原文鏈接

網站圖片置灰如今已經很常見了，最近上網找了些資料，基本都是用css3 grayscale和grayscale.js，作了測試，發現用CSS或greyscale.js都不能徹底兼容。javascript

測試瀏覽器版本：google、firefox、opera、safari、IE7-9css

css3 grayscale的，網上不少都是用這段CSS：html

            -webkit-filter: grayscale(100%);/*兼容google、opera*/
            -moz-filter: grayscale(100%);/*FF下不生效*/
            -ms-filter: grayscale(100%);/*IE下不生效*/
            -o-filter: grayscale(100%);/*opera下不生效*/

            filter: grayscale(100%);/*無效*/

　　　　　　  filter: gray;/*兼容IE7-IE9，IE10不支持*/

測試結果如上面代碼註釋所示（咋這麼多不生效(/ □ \)...，嘿咻嘿咻，本身測試測試~）。java

本身作了一番測試。先不廢話，上代碼和測試結果：jquery

1.方法1：CSS3 grayscale濾鏡實現。css3

　　　　只兼容google、opera、IE7-9web

代碼：瀏覽器

<!DOCTYPE html>
<head>
    <title></title>
    <style type="text/css">
        .gray {
              -webkit-filter: grayscale(100%);/*兼容google、opera*/            
　　　　　　　　filter: gray;/*兼容IE7-IE9，IE10不支持*/
        }
    </style>
</head>
<body>
    <img src="button.png" class="gray">
</body>
</html>

注意：要在須要變灰的img上加上類gray，再在.gray{}中寫CSS。不能把CSS寫在html{}中（由於在IE7-9中不支持）.例以下面所示：測試

<!DOCTYPE html>
<head>
    <title></title>
    <style type="text/css">
        html{
            -webkit-filter: grayscale(100%);/*兼容google、opera*/
            filter: gray;/*兼容IE7-IE9，IE10不支持*/
        }
    </style>
</head>
<body>
    <img src="button.png" class="gray">
</body>
</html>

2.方法2：只使用grayscale.js優化

　　　　只兼容google、opera、safari、firefox、IE9-10。 IE7-8不兼容！

代碼：

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <img src="button.png" class="gray">
</body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/grayscale.js"></script>
<script type="text/javascript">
    $(function(){
        grayscale(document.getElementsByTagName("img"));
    });
</script>
</html>

grayscale.js的下載地址：

http://www.bvbcode.com/cn/e0nx8py7-890221

綜上所述：

結合第1種的CSS和第2種的grayscale.js使用，就能夠兼容主流瀏覽器。我只測試了：google、firefox、safari、opera、IE7-10。

完整代碼：

<!DOCTYPE html>
<head>
    <title></title>
    <style type="text/css">
        .gray {
            -webkit-filter: grayscale(100%);/*兼容google、opera*/
            filter: gray;/*兼容IE7-IE9，IE10不支持*/
        }
    </style>
</head>
<body>
    <img src="button.png" class="gray">
</body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/grayscale.js"></script>
<script type="text/javascript">
    $(function(){
        grayscale(document.getElementsByTagName("img"));
    });
</script>
</html>

PS：
使用grayscale.js的缺點：1. 頁面加載完後纔對整個頁面進行變灰操做；2. 在非 IE 瀏覽器中不支持來自其它域名的網站圖片的變灰(網上說法，本身並未測試過)；3. 形成非 IE 瀏覽器在加載完頁面後進行大量 js 計算，該計算負擔能夠經過僅變灰 img, a 等標籤而不是 body 來優化。

若有其餘更好方法，歡迎留言討論。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。