canvas 图片反色

代码实例：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>图片反色</title>
    <style type="text/css">
        body{ background:black;}
        #c1{ background:white;}
    </style>
    <script type="text/javascript">
        window.onload=function()
        {
            var oC=document.getElementById('c1');
            var oGC=oC.getContext('2d');
            var oImg=new Image();
            oImg.onload=function()//图片预加载后才可以操作
            {
                draw(this);
            }
            oImg.src='1.PNG';
            function draw(obj)
            {
                oC.width=obj.width;//将画布设为图片宽的一倍
                oC.height=obj.height*2;//将画布设为图片高的两倍，以用来倒影

                oGC.drawImage(obj,0,0);//将图片画在画布上
                var newImg=oGC.getImageData(0,0,obj.width,obj.height);//得到图片数据
                var ONewImg = oGC.createImageData(obj.width,obj.height);
                //重要。要创建新的图片数据再将原来的反色后色数据赋值，
                // 如果直接在原数据上操作数据会导致数据覆盖而得不到结果
                for(var i=0;i<newImg.height;i++)
                {
                    for(var j=0;j<newImg.width;j++)
                    {
                        var color = getXY(newImg,j,i);//得到原来图片数据，一个像素有四个值，分别代表rgba
                        var result = [];
                        result[0] = 255 - color[0];
                        result[1] = 255 - color[1];
                        result[2] = 255 - color[2];
                        result[3] = 255*i/newImg.height;
                        setXY(ONewImg,j,newImg.height-i,result);//设置到新的数据里面
                    }
                }
                oGC.putImageData(ONewImg,0,obj.height);//将图片数据设置到画布中

            }
            //获取rgba
            function getXY(obj,x,y)
            {
                var w=obj.width;
                var h=obj.height;
                var data=obj.data;
                var color=[];

                color.push(data[(y*w+x)*4]);
                color.push(data[(y*w+x)*4+1]);
                color.push(data[(y*w+x)*4+2]);
                color.push(data[(y*w+x)*4+3]);

                return color;
            }
           //设置rgba
            function setXY(obj,x,y,color)
            {
                var w=obj.width;
                var h=obj.height;
                var data=obj.data;
                data[(y*w+x)*4]=color[0];
                data[(y*w+x)*4+1]=color[1];
                data[(y*w+x)*4+2]=color[2];
                data[(y*w+x)*4+3]=color[3];
            }
        }
    </script>
</head>

<body>
<canvas id="c1" width="500" height="500"></canvas>
</body>
</html>

　　图片：

效果：

 

 

2017-09-09   22:40:39

posted @ 2017-09-09 22:41  1点  阅读(312)  评论(0)    收藏  举报