基于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赋值对应的黑白色即可

下面是显示结果