基于canvas的图像黑白处理

图像黑白  首先需要在彩色照片上进行操作。在canvas上把彩色照片操作为黑白照片，其实就是对其像素点的操作

先贴代码，再做讲解

ctx.drawImage(imgs, 0, 0,width,height);            var pixels = ctx.getImageData(0,0,width,height);            var pixeldata = pixels.data;            for(var i=0,len = pixeldata.length ;i<len;i+=4){                var black =( pixels.data[i] + pixels.data[i+1] + pixels.data[i+2])/3;                if(black>=100){                    black = 255                }else{                    black = 0;                }                pixels.data[i] = black;                pixels.data[i+1] = black;                pixels.data[i+2] = black;            }

首先 先把图片放置到ctx画布上  再获取花部的像素点；为了优化js 希望for循环按照我的方式进行，减少js操作。

因为像素点为rgba构成 所以每四个一组，取rgb的平均值，如果rgb的平均值小于100 即为黑色，反之则为白色

最后再给对应的rgb赋值对应的黑白色即可

下面是显示结果