图像像素处理_明度/亮度/平均值/灰褐色/滤镜/灰色_canvas_js动画

来源：互联网发布：淘宝订单没有代付选项编辑：程序博客网时间：2024/05/16 07:50

本文参考《写给Web开发人员看的HTML5教程》

其他滤镜可参考jacob Seidelin的Pixastic图像处理库(http://www.pixastic.com/lib),那里有超过30种javascript

滤镜，均基于Mozilla的公开授权。

//明度function grayLigtness(r,g,b,a){    var val=parseInt(            (Math.max(r,g,b)+Math.min(r,g,b))*0.5    );    return [val,val,val,a];}//亮度function grayLuminosity(r,g,b,a){    var val=parseInt(r*0.21)+(g*0.71)+(b*0.07);    return [val,val,val,val,a];}//平均亮度function grayAverage(r,g,b,a){    var val=parseInt((r+g+b)/3.0);    return [val,val,val,a];}//棕褐色灰度图function sepiaTone(r,g,b,a){    var rs=(r*0.393)+(g*0.769)+(b*0.189);    var gs=(r*0.349)+(g*0.686)+(b*0.168);    var bs=(r*0.272)+(g*0.534)+(b*0.131);    return [        (rs>255) ? 255 : parseInt(rs),        (gs>255) ? 255 : parseInt(gs),        (bs>255) ? 255 : parseInt(bs),        a    ]}//滤镜,用来简单的反转颜色function invertColor(r,g,b,a){    return [        (255-r),        (255-b),        (255-b),            a    ];}//滤镜,修改颜色通道的顺序,例如:order=[2,0,1,3]function swapChannels(r,g,b,a,order){    var rgba=[r,g,b,a];    return [            rgba[order[0]],            rgba[order[1]],            rgba[order[2]],            rgba[order[3]]    ];}//起始像素的灰度作为alpha值,将每个像素的RGB设为特定颜色,第四个参数被定时为期望颜色的RGB值数组-//例如:color=[0,0,255]为蓝色,[0,0,0]灰色function monoColor(r,g,b,a,color){    return [            color[0],            color[1],            color[2],            255-(parseInt(r+g+b)/3)    ];}

0 0