使用jquery将彩色图片转换为黑白图片

随着技术的发展，在网页中将一张彩色图片转换为黑白图片已经不是什么难事了。有很多种方法可以达到这种图片转换的效果，包括使用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在上面绘制图片。来看下面的例子：

转换为黑白图片

代码如下：

<div class="container">
  <canvas id="canBoard"></canvas>
  <button type="button" id="btnConvert" class="btn btn-primary btn-block">转换为黑白图片</button>
  <img  style="display:none;"  id="imgTest" height="400" width="300"/>
</div> 

$(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来转换图片，在旧的浏览器中会使用其它方法来做相应的回退操作。