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

我们在做网站前端时，有时会碰到需要将图片变成黑白或者灰色的需求，比如商品缺货时，将图片置成灰色是一个很好的用户体验。那么如何将图片转换成黑白呢？我们通过程序调用不同的图片就很容易实现，但这种做法的缺点是同一种图片需要制作两张图片，一种是正常的图片，一种是灰色的图片。这样势必很繁琐。今天给大家介绍的是通过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代码：

SVG滤镜实现

我们新建一个空白文本文件，比如说：gray.txt. 拷贝进去如下的XML代码：

然后，修改后缀.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代码：

js实现将图片转换成黑白

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

然后添加代码：'

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

或DOM元素集：

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

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

grayscale($("#thisImage"));

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

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

声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/79.html