现在的位置: 网页制作教程网站制作教程 >正文
CSS

将图片转换成黑白(灰色)的css和js的方法

发表于2014/9/1 网站制作教程 0条评论 ⁄ 热度 4,291℃

我们在做网站前端时,有时会碰到需要将图片变成黑白或者灰色的需求,比如商品缺货时,将图片置成灰色是一个很好的用户体验。那么如何将图片转换成黑白呢?我们通过程序调用不同的图片就很容易实现,但这种做法的缺点是同一种图片需要制作两张图片,一种是正常的图片,一种是灰色的图片。这样势必很繁琐。今天给大家介绍的是通过CSS来实现这一效果。实现的方式主要有以下几种:

图片转换成黑白

CSS3 greyscale 滤镜实现

css代码:

.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" />

CSS3 greyscale 滤镜demo请点击

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调用代码:

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);	
    filter: grayscale(100%);
    filter: url(images/gray.svg#grayscale);	
    filter: gray;
}

HTML代码:

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

SVG滤镜demo请点击

js实现将图片转换成黑白

这种是利用js的方法实现最终结果,这种方法比较简单,也比较实用。我们首先需要先引入js文件。

<script src="images/grayscale.js"></script>

然后添加代码:

'
grayscale(document.getElementById("thisImage"));

或DOM元素集:

grayscale(document.getElementsByTagName("img"));

如果你喜欢使用jQuery,还可以使用如下代码,不过要先引用jQuery库文件。

grayscale($("#thisImage"));

实现原理:IE浏览器下是添加灰度滤镜,这个大家都懂的。其他浏览器貌似使用Canvas中的getImageData方法,然后对每个像素点进行灰度转换~~

JS实现图片转换黑白demo请点击

以上三种方法都可以实现将图片转换成黑白的效果。如有任何问题,均可在本教程下方留言。我要留言

  • 暂无评论