这次给大家带来JS对图片进行黑白化设置，JS对图片进行黑白化设置的注意事项有哪些，下面就是实战案例，一起来看一下。

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

先看一下效果图

左侧为 img标签 ， 右侧为 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);

}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：