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

本文参考《写给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)
    ];
}