canvas给图片添加灰度

这里是我经过百度之后得到的一些知识.

首先,应该图片绘制在canvas上,使用到API: drawImage(),需要参数最少三个;

var cv = document.getElementById("canvas_con");

var ct = cv.genContext("2d");

.......此处创建image标签,加载,并且绘制

ct.drawImage(image,0,0);

获取canvas画布的信息,使用API: getImageData(),所需参数四个,起点和面积.自行领悟API参数,该API返回的是一个对象,对象属性为三个:width,height和data;data是一个数组,存储的是根据参数获取到的像素点,像素点的个数就是宽高的乘积.每个像素点包括的信息为:rgba;依次存储在一维数组data当中,即rgbargbargba......

var data = ct.getImageData(0,0,image.width,image.height);

然后需要将这个一维数组按照我们的需要进行像素点的设置,这里遍历数组,可以使用for循环,步进为4,形式为:

for(var i =0;i<data.data.length;i+=4){

    var r = data.data[i];

    var g = data.data[i+1];

    var b = data.data[i+2];

    var gray =.299*r +.587*g +.118*b;//灰度公式

    data.data[i+0]=gray;

    data.data[i+1] = gray;

    data.data[i+2] = gray;

    data.data[i+3] =255;

}

以上还可以使用嵌套循环的方式,网上方法颇多,但是经过测试,其实还是单层for循环要更快一些,6毫秒左右

将修改完成的数据重新显示在画布

ct.putImageData(data,0,0);