JavaScript如何对图片进行黑白化

　　

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

　　

先看一下效果图

　　

JavaScript如何对图片进行黑白化

　　

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

　　 　　 　　& lt; img src=" https://www.yisu.com/zixun/1.jpg "/比; 　　& lt;帆布id="绘图"宽度=" 200 "高度=" 199 "祝辞& lt;/canvas> 　　 　　

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

　　

<强> 1,关于图片

　　

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

　　

<强> 2,关于API

　　

我们通过<代码> var画=. getelementbyid(画的)> 　　,使用<代码> context2d=drawing.getContext (2 d);方法获得context2d对象。拿到context2d对象之后,我们通过context2d提供的方法getImageData(),来获取图像数据,getImageData()有4个参数,分别表示画面区域的x和y坐标以及该区域的像素宽度和高度<代码> var imagedata=https://www.yisu.com/zixun/context2d.getImageData(0, 0,形象。宽度,image.height);
　　

　　

, ImageData对象都有三个属性:宽度、高度和
　　数据,其数据中属性是一个数组,保存着图像中每一个像素的数据,并通过,红色,绿色,蓝色,α来表示。那么我们如果想要改变图像的图像数据,就需要改变imagedata的数据属性数据,改变红色,绿色,蓝色,α的值。

　　

这里是源代码

　　 　　 　　函数drawImageData () { 　　var context2d=零; 　　如果(drawing.getContext) { 　　context2d=drawing.getContext (2 d); 　　} 　　如果(context2d==null) { 　　返回; 　　} 　　var=document.images形象[0]; 　　context2d。drawImage(图像,0,0); 　　var imagedata=https://www.yisu.com/zixun/context2d.getImageData(0, 0,形象。宽度,image.height); 　　var=imagedata.data数据; 　　控制台。日志(“数据:”+数据); 　　var我,兰,红,绿,蓝,α,平均; 　　(我=0,len=data.length;我& lt;兰;我+=4){ 　　红色=数据(我); 　　绿色=数据(i + 1); 　　蓝色=数据(+ 2); 　　α=数据(+ 3); 　　平均=数学。地板((红+绿+蓝)/3); 　　数据[我]=平均; 　　数据(i + 1)=平均; 　　数据(i + 2]=平均; 　　} 　　imagedata。数据=https://www.yisu.com/zixun/data; 　　context2d。putImageData (imagedata, 0, 0); 　　} 　　 　　

　　

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

JavaScript如何对图片进行黑白化