基于canvas的图片反色处理

时间:2022-10-24 07:31:47

图片反色,其实很简单,就是黑变成白,白变成黑。如此而已 

下面先贴代码

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){
pixels.data[i] = 255- pixels.data[i];
pixels.data[i+1] = 255 - pixels.data[i+1];
pixels.data[i+2] = 255 - pixels.data[i+2];
}

因为每一个rgb的范围都是 0-255  这样 的数值 通过255减去初始的数值 就是其对应的反色数值了

下面上图片  看效果基于canvas的图片反色处理基于canvas的图片反色处理

是不是很炫酷那  基于canvas的各种图片处理,还有很多,欢迎大家继续阅读。