HTML5引入了canvas元素，让我们可以通过js在canvas区域动态绘制图像。而这一次，我们使用js来操纵画布元素，实现图像的黑化。

先看效果图

左边是Img标签，右边是canvas元素标签。结构如下

img src=' http :1 . jpg ' style=' width : 200 px；height : 199px '/canvas id=' drawing ' width=' 200 ' height=' 199 '/canvas js的代码非常简单，只有20多行。但是，在授人以鱼不如授人以渔的态度下，源代码会贴在最下面。先说理论。

1.关于图片

众所周知，所谓的图片是由像素组成的，也就是说一张300*300大小的图片有300*300个像素，每个像素由三原色(红、绿、蓝)加上透明度(alpha)组成。因此，如果我们想改变图像的图像数据，我们实际上是在改变图像的每个像素的数据。

2.关于API

我们使用var drawing=document。getelementbyid(' drawing ')；这种方法可以得到画布对象，从而提供2D和三维绘图方法。这里，我们使用2D绘图来使用context2D=绘图。getContext(' 2D ')；方法获取context2d对象。获取context2d对象后，我们通过context2d提供的getImageData()方法获取图像数据。getImageData()有四个参数，分别表示图片区域的X、Y坐标以及区域的像素宽度和高度。VarImageData=Context2D。GetImageData (0，0，image。宽度，图像。高度)；

ImageData对象有三个属性：宽度、高度和数据。数据属性是一个数组，保存图像中每个像素的数据。并以红、绿、蓝、阿尔法为代表。那么如果我们想要改变图像的imagedata，就需要改变图像数据的数据属性数据，改变红、绿、蓝、alpha的值。

这是源代码

函数drawinimagedata(){ var context 2d=null；if(drawing . getcontext){ context 2d=drawing . getcontext(' 2d ')；} if(context 2d==null){ return；} var image=document . images[0]；context2d.drawImage(image，0，0)；var imagedata=context 2d . getimagedata(0，0，image.width，image . height)；var data=imagedata.dataconsole.log('data: '数据)；var i，len，红，绿，蓝，，平均值；for (i=0，len=data.length我透镜；I=4){ red=data[I]；绿色=数据[I 1]；蓝色=数据[I 2]；alpha=数据[I ^ 3]；average=Math.floor((红绿蓝)/3)；数据[i]=平均值；数据[i 1]=平均值；数据[i 2]=平均值；} imagedata.data=datacontext2d . putimagedata(imagedata，0，0)；}摘要

以上是JavaScript如何黑化图片的简单介绍，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！