随着技术的发展，在网页中将一张彩色图片转换为黑白图片已经不是什么难事了。有很多种方法可以达到这种图片转换的效果，包括使用CSS3滤镜，HTML5 Canvas和jquery插件等。
使用jquery插件可以非常轻松的完成彩色图片到黑白图片的转换，在介绍jquery插件之前，我们先来看看CSS3和HTML5 Canvas的方法。
使用CSS3 filter
CSS3支持很多种滤镜，通过CSS3滤镜，我们可以制作出类似photoshop的滤镜效果。例如为图片制作模糊效果，阴影效果，滤色效果等。其中的grayscale()滤镜用于将图片转换为灰度图片。下面是一个例子：
原图(彩色图片)
使用grayscale()滤镜后的效果
grayscale()的值定义转换的比例。值为100%则完全转为灰度图像(即黑白图片)，值为0%图像无变化。值在0%到100%之间，数值越接近100%，则图像中有更多的部分会被转换为灰度。当数值超过100%时，浏览器会将值设置为100%。如果没有设置值，默认的值为100%。
使用HTML5 canvas
除了使用CSS3 grayscale()灰度滤镜之外，还可以使用HTML5 canvas来制作黑白图片。canvas作为一块空白的画布，你可以通过jquery或javascript在上面绘制图片。来看下面的例子：
转换为黑白图片
代码如下：
转换为黑白图片
$(function() {
var img = $('#imgTest');
var canvas = $('#canBoard')[0];
context = canvas.getContext('2d');
img.load(function(){
context.drawImage(this, 0, 0);
});
img.attr('src','girl.jpg');
var imgW = img.width();
var imgH = img.height();
canvas.width = imgW;
canvas.height = imgH;
$('#btnConvert').click(function(){
var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
var pxls = imgData.data;
var black = 0;
for (var i = 0, n = pxls.length; i < n; i += 4)
{
black = (pxls[i] + pxls[i+1] + pxls[i+2]) / 3;
pxls[i] = black;
pxls[i+1] = black;
pxls[i+2] = black;
}
context.putImageData(imgData, 0, 0);
});
});
使用jquery插件
有很多不错的jquery插件可以完成彩色图片到黑白图片转换的工作。下面就介绍几款jquery插件。
gray：gray是一款可以在现代浏览器中将彩色图片转换为黑白图片的jquery插件。它不需要html5 canvas。
jquery-grayscale：jquery-grayscale是另外一款可以将彩色图片转换为黑白图片的jquery插件。它需要html5 canvas。
jQuery.BlackAndWhite：jQuery.BlackAndWhite也是一款将彩色图片转换为黑白图片的jquery插件。它默认使用html5 canvas来转换图片，在旧的浏览器中会使用其它方法来做相应的回退操作。
