zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    (3)C++复合类型
    (2)C++基本类型
    (7)js调试
    Oracle语句优先级
    oracle排序问题
    jsp四大对象
    postgresql时间加减计算
    全角空格,跟汉字一样宽
    bzoj1433 [ZJOI2009]假期的宿舍 最大流
    BZOJ 1264 AHOI2006 基因匹配Match 动态规划+树状数组
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/7499594.html
Copyright © 2011-2022 走看看