将图片转换成黑白(灰色、置灰)

最新推荐文章于 2022-12-01 13:50:35 发布

weixin_34319374

最新推荐文章于 2022-12-01 13:50:35 发布

阅读量434

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Rosefxd/p/4260078.html

版权

网站图片置灰现在已经很常见了，最近上网找了些资料，基本都是用css3 grayscale和grayscale.js，做了测试，发现用CSS或greyscale.js都不能完全兼容。

测试浏览器版本：google、firefox、opera、safari、IE7-9

css3 grayscale的，网上很多都是用这段CSS：

            -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不支持*/

测试结果如上面代码注释所示（咋这么多不生效(/ □ \)...，嘿咻嘿咻，自己测试测试~）。

自己做了一番测试。先不废话，上代码和测试结果：

1.方法1：CSS3 grayscale滤镜实现。

　　　　只兼容google、opera、IE7-9

代码：

<!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 来优化。

如有其他更好方法，欢迎留言讨论。

转载于:https://www.cnblogs.com/Rosefxd/p/4260078.html