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

共计 1622 个字符，预计需要花费 5 分钟才能阅读完成。

随着技术的发展，在网页中将一张彩色图片转换为黑白图片已经不是什么难事了。有很多种方法可以达到这种图片转换的效果，包括使用 CSS3 滤镜，HTML5 Canvas 和 jquery 插件等。

使用 jquery 插件可以非常轻松的完成彩色图片到黑白图片的转换，在介绍 jquery 插件之前，我们先来看看 CSS3 和 HTML5 Canvas 的方法。

使用 CSS3 filter

CSS3 支持很多种滤镜，通过 CSS3 滤镜，我们可以制作出类似 photoshop 的滤镜效果。例如为图片制作模糊效果，阴影效果，滤色效果等。其中的grayscale() 滤镜用于将图片转换为灰度图片。下面是一个例子：

使用 jquery 将彩色图片转换为黑白图片原图（彩色图片）
使用 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 来转换图片，在旧的浏览器中会使用其它方法来做相应的回退操作。