最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

JavaScript如何对图片进行黑白化

来源:动视网 责编:小采 时间:2020-11-27 22:16:42
文档

JavaScript如何对图片进行黑白化

JavaScript如何对图片进行黑白化:HTML5推出了<canvas>元素,使我们可以通过js动态的在 <canvas> 这个区域之中进行图像的绘制。而我们这次对图像的黑白化就是使用js操作<canvas>元素 来实现的。 先看一下效果图 左侧为 img标签 , 右侧为 canvas 元素标签,
推荐度:
导读JavaScript如何对图片进行黑白化:HTML5推出了<canvas>元素,使我们可以通过js动态的在 <canvas> 这个区域之中进行图像的绘制。而我们这次对图像的黑白化就是使用js操作<canvas>元素 来实现的。 先看一下效果图 左侧为 img标签 , 右侧为 canvas 元素标签,

HTML5推出了<canvas>元素,使我们可以通过js动态的在 <canvas> 这个区域之中进行图像的绘制。而我们这次对图像的黑白化就是使用js操作<canvas>元素 来实现的。

先看一下效果图

左侧为 img标签 , 右侧为 canvas 元素标签,结构如下

<img src="1.jpg" style="width: 200px; height: 199px"/>
<canvas id="drawing" width="200" height="199" ></canvas>

JS的代码很简单, 只有20多行 ,不过本着授人与鱼不如授人于渔的态度,源码会贴到最下面,我们先说理论。

1、关于图片

 大家应该都知道,所谓图片是由一个个的像素点组成的,也就是说一个 300*300大小的图片,共有300*300的像素点,而每一个像素点都是由三原色(red,green,blue)加透明度(alpha)来组成。所以说如果我们希望改变图像的图像数据,其实就是改变图像每一个像素点的数据。

2、关于API

我们通过 var drawing = document.getElementById('drawing'); 这个方法可以拿到 canvas对象,canvas对象提供了 2D、3D两种绘图方式,这里我们使用2D绘图
 使用 context2d = drawing.getContext('2d'); 方法获得context2d对象。拿到context2d对象之后,我们通过context2d提供的方法getImageData(),来获取图像数据,getImageData()有4个参数,分别表示画面区域的 x 和 y 坐标以及该区域的像素宽度和高度 var imagedata = context2d.getImageData(0, 0, image.width, image.height); 

 ImageData 对象都有三个属性:width、height 和
data。其中 data 属性是一个数组,保存着图像中每一个像素的数据。并通过,red,green,blue,alpha来表示。那么我们如果想要改变图像的图像数据,就需要改变 imagedata的data属性数据,改变 red,green,blue,alpha 的值。

这里是源代码

function drawImageData () {
 var context2d = null;
 if(drawing.getContext) {
 context2d = drawing.getContext('2d');
 }
 if (context2d == null) {
 return;
 }
 var image = document.images[0];
 context2d.drawImage(image, 0 , 0);
 var imagedata = context2d.getImageData(0, 0, image.width, image.height);
 var data = imagedata.data;
 console.log('data: ' + data);
 var i,len,red,green,blue,alpha,average;
 for (i = 0 , len = data.length; i < len; i+=4) {
 red = data[i];
 green = data[i + 1];
 blue = data[i + 2];
 alpha = data[i + 3];
 average = Math.floor((red + green + blue) / 3);
 data[i] = average; 
 data[i+1] = average; 
 data[i+2] = average;
 }
 imagedata.data = data;
 context2d.putImageData(imagedata, 0, 0);
 }

总结

以上所述是小编给大家介绍JavaScript如何对图片进行黑白化,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

文档

JavaScript如何对图片进行黑白化

JavaScript如何对图片进行黑白化:HTML5推出了<canvas>元素,使我们可以通过js动态的在 <canvas> 这个区域之中进行图像的绘制。而我们这次对图像的黑白化就是使用js操作<canvas>元素 来实现的。 先看一下效果图 左侧为 img标签 , 右侧为 canvas 元素标签,
推荐度:
标签: js 将图片 黑白
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top