当前位置主页 > 资料库 > 前端教程 > 使用jquery将彩色图片转换为黑白图片

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

2017-06-06

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

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

使用CSS3 filter

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

美女彩色图片
原图(彩色图片)
css text-shadow两重阴影时得到的描边效果
使用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来转换图片,在旧的浏览器中会使用其它方法来做相应的回退操作。
Previous:
上一篇:为HTML5 Placeholder占位文字添加CSS样式
Next:
下一篇:使用HTML5和CSS3制作遮罩文字特效

我要评论

返回顶部