最近接触了一下canvas,主要用来构建一些情况下的页面部分。

记录一下,使用canvas实现图片颜色的反转。

效果如下:

postbird

当然,我用的是最基础的javascript操作的,而不是使用库。

一、创建画布

一个简单的画布

<canvas id="c1" width="400" height="800" >
    <span>当前浏览器内核不支持Canvas,请更换浏览器.</span>
</canvas>

二、图片的操作

canvas上加载图片最主要的一点就是,必须在图片load之后才能使用,不过我直接在js里面指定了一张图片,并没有通过dom去获取

如下所示,当图片load之后,使用函数draw画出图片,同时画出图片的反色,因此最重要的函数就是draw。draw函数的参数是图片对象 obj

var yImg=new Image();
yImg.onload=function(){
    draw(yImg);
};
yImg.src='logo.png';
yImg.src='2.jpg';

不过,应当获取画布的相关对象

var oc=document.getElementById('c1');
var ogc=oc.getContext('2d');

函数draw是为了画出图片,同时画出图片的反色。

反色的处理方式是通过像素点来处理。通过ImageData能够很方便的获取像素点。而100x100的像素点的数组大小是4w,因为每四个数组元素表示一个 像素点的rgba。

draw函数如下:

function draw(obj){
    //画布的宽度是图片的宽度
    oc.width=obj.width;
    //在0 0 开始画出图片
    ogc.drawImage(obj,0,0);
    //获得图片的imageData
    var oImg=ogc.getImageData(0,0,obj.width,obj.height);
    //获得像素点的宽高
    var w=oImg.width;
    var h=oImg.height;
    //循环执行像素点
    for(var i=0;i<h;i++){
        for(var j=0;j<w;j++){
            var result=[];
            //获取这一行的像素值
            var cc=getXY(oImg,j,i);
            //反色操作
            //rgb的操作就是 255-当前的颜色代码值
            result[0]=255-cc[0];
            result[1]=255-cc[1];
            result[2]=255-cc[2];
            result[3]=255;
            //设置新的像素
            setXY(oImg,j,i,result);
    }
    }
    //输出图片
    ogc.putImageData(oImg,0,obj.height);

}

可以看出上述函数中getImageData之后就是两个嵌套循环处理每个像素点。

因此draw函数中还有两个关键的函数分别是getXY()和setXY(),分别是通过像素点的坐标获取像素点的rgba,或者是设置像素点的rgba.

function getXY(obj,x,y){
    var w=obj.width;
    var h=obj.height;
    var d=obj.data;
    var color=[];
    
    color[0]=d[(y*w+x)*4];
    color[1]=d[(y*w+x)*4+1];
    color[2]=d[(y*w+x)*4+2];
    color[3]=d[(y*w+x)*4+3];
    return color;
}
function setXY(obj,x,y,color){
    var w=obj.width;
    var h=obj.height;
    var d=obj.data;
    d[(y*w+x)*4]=color[0];
    d[(y*w+x)*4+1]=color[1];
    d[(y*w+x)*4+2]=color[2];
    d[(y*w+x)*4+3]=color[3];
}

其实两个函数的原理是一样的,无非就是返过来而已。

三、代码

码云存了一份完整的html代码:

https://git.oschina.net/postbird/codes/ks3fmiqojnuvwypt41h0c94