jq html转为图片,使用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在上面绘制图片。来看下面的例子：

转换为黑白图片

代码如下：

转换为黑白图片

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