图片取色，头像加框，滤镜效果

代码组织，建个文件夹，进去，建个HTML文件，粘贴如下代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>在线图片处理</title>
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
        <meta name="description" content="在线图片处理"/>
        <meta name="keywords" content="图片,取色器,处理,头像,边框,滤镜"/>
        <style type="text/css">
            /* 公共部分 start */
            *{
                margin: 0px;
                padding: 0px;
            }
            #thecolor,#beautify,#filter{
                width: 100%;
                position: absolute;
                left: 0px;
                top: 0px;
            }
            #beautify,#filter{
                display: none;
            }
            #routing{
                position: fixed;
                left: 0px;
                top: 200px;
                z-index: 999;
                background: #E0E0E0;
            }
            #routing ul li{
                height: 40px;
                line-height: 40px;
                width: 160px;
                text-align: center;
            }
            #routing ul li:first-child{
                background: #5A5AAD;
            }
            #routing ul li:first-child a{
                color: white;
            }
            a:hover, a:visited, a:link, a:active{
                text-decoration: none;
                font-weight: 700;
                font-size: 20px;
                color: #5A5AAD;
            }
            ul li{
                list-style: none;
            }
            /* 公共部分 end */
            
            /* 在线图片取色器 start */
            .rongqi{
                height: 20px;
                width: 185px;
                margin-top: 10px;
                display: inline-block;
            }
            .yanse{
                height: 20px;
                width: 20px;
                float: left;
                cursor: pointer;
            }
            .daima{
                height: 20px;
                width: 155px;
                line-height: 20px;
                float: right;
            }
            .title{
                width: 100%;
                height: 60px;
                background: #1AB2B7;
                color: white;
                line-height: 60px;
                text-align: center;
                font-size: 25px;
                font-weight: 700;
            }
            .main{
                width: 60%;
                margin: 0 auto;
            }
            .s1{
                background: #408080;
                color: white !important;
            }
            .s2{
                background: white;
                color: #353535 !important;
            }
            .last{
                width:100%;
            }
            .geshi{
                border: 1px solid #408080;
                border-radius: 7px;
                padding: 5px 10px;
                color: #353535;
                cursor: pointer;
            }
            #qiongju{
                font-size: 17px;
                padding: 8px 13px;
                color: white;
                border: 1px solid #1AB2B7;
                background: #1AB2B7;
            }
            .colorbody{
                position: relative;
                width: 445px;
                height: 30px;
                margin-top: 15px;
            }
            .colorbody div{
                width: 100px;
                height: 30px;
                border: 1xp solid red;
                float: left;
                background: #E0E0E0;
                border-radius: 5px;
                cursor: pointer;
            }
            #colorsize{
                color: red;
                font-weight: 700;
            }
            .upload{
                background: #1AB2B7;
                color: white;
                padding: 5px 10px;
                position: relative;
                right: 89px;
                z-index: 1;
            }
            input{
                width: 84px;
                z-index: 2;
                position: relative;
                opacity: 0;
            }
            p{
                font-size: 18px;
            }
            .last,#quanbu{
                color: grey;
            }
            /* 在线图片取色器 end */
            
            /* 头像美化 start */
            .logos{
                width: 300px;
                height: 300px;
                margin: 30px auto 0;
                cursor: pointer;
                display: block;
            }
            .bhb{
                width: 60%;
                display: none;
                position: absolute;
                left: 20%;
                top: 90px;
            }
            .logokuang{
                padding: 10px;
                border: 3px solid #408080;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                cursor: pointer;
            }
            .thesize{
                display: inline-block;
                width: 50px;
                height: 50px;
                color: white;
                background: #108757;
                font-size: 42px;
                font-weight: 700;
                text-align: center;
                line-height: 50px;
                border-radius: 5px;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .generate,.generates{
                position: relative;
                top: 370px;
                border-style: none;
                padding: 10px 15px;
                background: #108757;
                color: white;
                font-size: 20px;
                cursor: pointer;
            }
            .yichu{
                position: absolute;
                left: 0px;
                top: 0px;
                width: 300px;
                height: 300px;
                overflow: hidden;
            }
            #bhuabans{
                position: absolute;
                top: 50px;
                left: 50px;
                cursor: move;
            }
            .setcss{
                padding-top: 5px;
                padding-bottom: 5px;
                position: relative;
                top: 340px;
            }
            .setthesize{
                padding-top: 5px;
                padding-bottom: 5px;
                position: relative;
                top: 320px;
            }
            /* 头像美化 end */
            
            /* 滤镜效果 start */
            .clogos{
                width: 650px;
                height: 550px;
                margin: 30px auto 0;
                cursor: pointer;
                display: block;
            }
            .cbhb{
                width: 60%;
                display: none;
                position: absolute;
                left: 20%;
                top: 90px;
            }
            .photocss{
                cursor: pointer;
                display: inline-block;
                padding: 5px 10px;
                margin-bottom: 15px;
                font-size: 20px;
                color: #EA7500;
                border: 3px solid #EA7500;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .downloadimg{
                border-style: none;
                padding: 10px 15px;
                background: #EA7500;
                color: white;
                font-size: 20px;
                cursor: pointer;
            }
            /* 滤镜效果 end */
        </style>
    </head>
    <body>
        <!-- 路由部分HTML -->
        <div id="routing">
            <ul>
                <li><a href="#thecolor">在线图片取色器</a></li>
                <li><a href="#beautify">头像优化</a></li>
                <li><a href="#filter">滤镜效果</a></li>
            </ul>
        </div>
        <!-- 在线图片取色器部分HTML -->
        <div id="thecolor">
            <div class="title">在线图片取色器</div>
            <div class="main">
                <br/>
                <p>选择一张图片，可以<b style="color: red;">直接点击取单色</b>，也可以列出所有颜色，支持RGB和十六进制两种表示方法</p>
                <br/><br/>
                <input type="file" id="shuru" accept="image/*" />
                <span class="upload">上传图片</span>
                <br/><br/><br/>
                <div id="liechu" style="display: none;">
                    <span class="geshi s1">十六进制表示法</span>&nbsp;&nbsp;
                    <span class="geshi">RGB表示法</span>
                    <br/><br/>
                    <p>设置<b style="color: red;">颜色区间</b>（列出全部颜色时，数字越小识别的颜色越多，速度越慢），当前区间大小：&nbsp;&nbsp;<span id="colorsize">8</span></p>
                    <div class="colorbody">
                        <div style="background: #6FB7B7;"></div>
                        <div style="margin-left: 15px;background: #6FB7B7;"></div>
                        <div style="margin-left: 15px;"></div>
                        <div style="margin-left: 15px;"></div>
                    </div>
                    <br/><br/>
                    <span id="qiongju" class="geshi">列出所有颜色</span>
                    <span>(对列出的颜色进行点击可以切换单个颜色的表示方法或者复制颜色代码)</span>
                </div>
                <br/>
                <canvas id="huaban" width="0" height="0"></canvas>
                <br/>
                <!-- 显示选中的颜色 -->
                <div class="last"></div>
            </div>
            <!-- 列出全部的颜色 -->
            <div id="quanbu" class="main" style="border-top: 1px solid #408080;margin-top: 10px;"></div>
        </div>
        <!-- 头像美化部分HTML -->
        <div id="beautify">
            <div class="title" style="background: #108757;">头&nbsp;像&nbsp;美&nbsp;化</div>
            <input type="file" id="logo" accept="image/*" style="display: none;" />
            <div class="logos">
                <img src="./images/5.jpg" width="300" height="300" />
            </div>
            <div class="bhb">
                <div class="yichu">
                    <canvas id="bhuaban" width="300" height="300" ></canvas>
                    <canvas id="bhuabans" width="200" height="200"></canvas>
                </div>
                <div class="setthesize">
                    <span class="thesize">+</span>&nbsp;&nbsp;<span class="thesize">-</span>&nbsp;&nbsp;<span class="thesize" style="width: 100px;height: 50px;">默认</span>
                </div>
                <div class="setcss">
                    <span class="logokuang" style="background: #408080;color: white;">方形国旗</span>&nbsp;&nbsp;<span class="logokuang">圆形国旗</span>&nbsp;&nbsp;<span class="logokuang">国庆快乐</span>&nbsp;&nbsp;<span class="logokuang">70周年</span>
                </div>
                <button type="button" class="generate">生成头像</button>
                <button type="button" class="generates" style="display: none;">重新生成</button>
            </div>
        </div>
        <!-- 滤镜效果部分HTML -->
        <div id="filter">
            <div class="title" style="background: #EA7500;">滤&nbsp;镜&nbsp;效&nbsp;果</div>
            <input type="file" id="photo" accept="image/*" />
            <div class="clogos">
                <img src="./images/6.jpg" width="650" height="550" />
            </div>
            <div class="cbhb">
                <canvas id="chuaban" width="0" height="0"></canvas>
                <div style="width: 100%;margin-top: 20px;">
                    <span class="photocss" style="background: #EA7500;color: white;">原图</span>
                    <span class="photocss">灰度</span>
                    <span class="photocss">黑白</span>
                    <span class="photocss">底片</span>
                    <span class="photocss">去色</span>
                    <span class="photocss">单色(红)</span>
                    <span class="photocss">单色(绿)</span>
                    <span class="photocss">单色(蓝)</span>
                    <span class="photocss">怀旧</span>
                    <span class="photocss">熔铸</span>
                    <span class="photocss">冰冻</span>
                    <span class="photocss">连环画</span>
                    <span class="photocss">浮雕</span>
                    <span class="photocss">暗调</span>
                    <span class="photocss">透明</span>
                    <span class="photocss">霓虹</span>
                    <span class="photocss">抖音红</span>
                </div>
                <button type="button" class="downloadimg">下载</button>
                <a href="#" id="downf" download="滤镜效果.png"></a>
            </div>
        </div>
        
        <script type="text/javascript">
            ;(function(){
                
                //路由部分
                var routings = document.getElementById("routing").children[0];
                var routinga = routings.children[0];
                var routingb = routings.children[1];
                var routingc = routings.children[2];
                var rthecolor = document.getElementById("thecolor");
                var rbeautify = document.getElementById("beautify");
                var rfilter = document.getElementById("filter");
                var arrs = [routinga, routingb, routingc, routinga.children[0], routingb.children[0], routingc.children[0], rthecolor, rbeautify, rfilter];
                window.addEventListener("hashchange", changerouting);
                function changerouting(){//路由改变时触发的函数
                    if(location.hash == "#thecolor" || location.hash == ""){
                        routingcss(0);
                    }else if(location.hash == "#beautify"){
                        routingcss(1);
                    }else if(location.hash == "#filter"){
                        routingcss(2);
                    }else{
                        
                    }
                }
                function routingcss(k){//封装 路由样式改变div的隐藏显示
                    for(let i = 0; i <= 2; ++i){
                        arrs[i].style.background = "#E0E0E0";
                    }
                    for(let i = 3; i <= 5; ++i){
                        arrs[i].style.color = "#5A5AAD";
                    }
                    for(let i = 6; i <= 8; ++i){
                        arrs[i].style.display = "none";
                    }
                    arrs[k].style.background = "#5A5AAD";
                    arrs[k+3].style.color = "white";
                    arrs[k+6].style.display = "block";
                }
                changerouting();
                
                //图片取色器部分
                var huaban = document.getElementById("huaban");
                var s1 = document.getElementsByTagName("span")[1];
                var s2 = document.getElementsByTagName("span")[2];
                var cc = document.getElementsByClassName("colorbody")[0];
                var c1 = cc.getElementsByTagName("div")[0];
                var c2 = cc.getElementsByTagName("div")[1];
                var c3 = cc.getElementsByTagName("div")[2];
                var c4 = cc.getElementsByTagName("div")[3];
                var cbackcolor = ["#6FB7B7","#E0E0E0","#E0E0E0","#E0E0E0"];
                var cax = huaban.getContext("2d");
                var xiangsu = null;//存储图片的像素信息
                var code = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
                var zt = 1;//表示 十六进制表示法 RGB表示法的切换状态
                var jg = 8;//表示颜色间隔
                var jgAdd = (256/jg)*(256/jg)*(256/jg);//表示颜色总量
                var arr = new Array();//表示颜色区间,间隔为jg
                //初始化颜色区间
                for(let i = 0; i < jgAdd; ++i)
                {
                    arr[i] = new Array();
                    arr[i][0] = 0;
                    arr[i][1] = 0;
                    arr[i][2] = 0;
                    arr[i][3] = 0;
                }
                
                document.getElementById("shuru").onchange = function(){//上传图片后,获取像素信息,绘制到canvas上
                    if(this.files[0].name != "") { document.getElementById("liechu").style.display = "block"; }
                    document.getElementsByClassName("last")[0].innerHTML = "";
                    document.getElementById("quanbu").innerHTML = "";
                    
                    var reader = new FileReader();
                    reader.readAsDataURL(this.files[0]);
                    reader.onload = function(){
                        var image = new Image();
                        image.src = reader.result;
                        image.onload = function(){
                            huaban.width = this.width;
                            huaban.height = this.height;
                            cax.drawImage(image, 0, 0, this.width, this.height);
                            xiangsu = cax.getImageData(0, 0, this.width, this.height);
                        };
                    };
                }
                
                c1.onclick = function(){
                    jg = 4;
                    reset();
                    cbackcolor = ["#6FB7B7","#E0E0E0","#E0E0E0","#E0E0E0"];
                    setcbackcolor();
                }
                
                c2.onclick = function(){
                    jg = 8;
                    reset();
                    cbackcolor = ["#6FB7B7","#6FB7B7","#E0E0E0","#E0E0E0"];
                    setcbackcolor();
                }
                
                c3.onclick = function(){
                    jg = 16;
                    reset();
                    cbackcolor = ["#6FB7B7","#6FB7B7","#6FB7B7","#E0E0E0"];
                    setcbackcolor();
                }
                
                c4.onclick = function(){
                    jg = 32;
                    reset();
                    cbackcolor = ["#6FB7B7","#6FB7B7","#6FB7B7","#6FB7B7"];
                    setcbackcolor();
                }
                
                function setcbackcolor(){//封装 设置颜色区间的背景颜色
                    for(let i = 1; i <= 4; ++i){
                        let temp = "c" + i;
                        eval(temp).style.background = cbackcolor[i-1];
                    }
                }
                
                document.getElementById("quanbu").onclick = qie;
                document.getElementsByClassName("last")[0].onclick = qie;
                
                function qie(q){//十进制表示法和rgb表示法来回切换，复制内容到剪切板
                    var q = q || window.event;
                    var target = q.target || q.srcElement;
                    if(target.className == 'yanse'){
                        var content = target.nextSibling;
                        var colorCode = target.style.background;
                        if(content.innerHTML[0] == '#'){ }
                        else{
                            colorCode = colorCode.slice(4, -1);
                            colorCode = colorCode.split(',');
                            for(let i = 0; i <= 2; ++i)
                            {
                                colorCode[i] = parseInt(colorCode[i]);
                            }
                            colorCode = '#' + shiliu(colorCode).join('');
                        }
                        content.innerHTML = colorCode;
                    }
                    if(target.className == 'daima'){
                        var strcolor = target.innerHTML;
                        var shuru = document.createElement("input");
                        shuru.setAttribute("type", "text");
                        shuru.setAttribute("id", "copycode");
                        shuru.setAttribute("value", strcolor);
                        document.getElementsByTagName("body")[0].appendChild(shuru);
                        document.getElementById("copycode").select();
                        document.execCommand("copy");
                        document.getElementById("copycode").remove();
                        alert("已复制到剪切板");
                    }
                }
                
                s1.onclick = function(){//切成十六进制表示法
                    zt = 1;
                    s1.className = "geshi s1";
                    s2.className = "geshi s2";
                }
                
                s2.onclick = function(){//切成RGB表示法
                    zt = 2;
                    s1.className = "geshi s2";
                    s2.className = "geshi s1";
                }
                
                huaban.onclick = function(){//获取当前点击的颜色信息并创建相关节点添加到文档
                    var e = arguments[0] || window.event;
                    var x = e.offsetX;
                    var y = e.offsetY;
                    var tuKuan = xiangsu.width;
                    var rgb = ((y - 1) * tuKuan + x) * 4;
                    var rgbx = xiangsu.data[rgb - 4];
                    var rgby = xiangsu.data[rgb - 3];
                    var rgbz = xiangsu.data[rgb - 2];
                    var ysdaima = shiliu([rgbx, rgby, rgbz]);
                    ysdaima = '#' + ysdaima.join('');
                    var shili = document.createElement("div");
                    var yanse = document.createElement("div");
                    var daima = document.createElement("div");
                    var pinjie = "rgb(" + rgbx + "," + rgby + "," + rgbz + ")";
                    yanse.style.background = pinjie;
                    if(zt == 1) { daima.innerHTML = ysdaima; }
                    else { daima.innerHTML = pinjie; }
                    daima.setAttribute("class", "daima");
                    shili.setAttribute("class", "rongqi");
                    yanse.setAttribute("class", "yanse");
                    yanse.setAttribute("title", "点击切换");
                    daima.setAttribute("title", "点击复制");
                    shili.appendChild(yanse);
                    shili.appendChild(daima);
                    var zhuti = document.getElementsByClassName("last")[0];
                    zhuti.appendChild(shili);
                }
                
                function reset(){  //初始化函数
                    jgAdd = (256/jg)*(256/jg)*(256/jg);
                    arr = new Array();
                    for(let i = 0; i < jgAdd; ++i)
                    {
                        arr[i] = new Array();
                        arr[i][0] = 0;
                        arr[i][1] = 0;
                        arr[i][2] = 0;
                        arr[i][3] = 0;
                    }
                    document.getElementById("colorsize").innerHTML = jg;
                }
                
                document.getElementById("qiongju").onclick = function(){//遍历每个像素点,对相似颜色进行过滤处理,创建相关节点添加到文档
                    var len = xiangsu.width * xiangsu.height * 4;
                    var temp = xiangsu.data;
                    var dom = "";
                    for(let i = 0; i < len; i = i + 4)
                    {
                        let jgs = 256/jg;
                        let linshi = Math.floor(temp[i]/jg)*jgs*jgs + Math.floor(temp[i+1]/jg)*jgs + Math.floor(temp[i+2]/jg);
                        if(arr[linshi][3] == 0){ arr[linshi][0] = temp[i]; arr[linshi][1] = temp[i+1]; arr[linshi][2] = temp[i+2]; arr[linshi][3] = 1; }
                    }
                    for(let i = 0; i < jgAdd; ++i)
                    {
                        if(arr[i][3] == 1)
                        {
                            let color = "";
                            if(zt == 1){
                                let ysdaima = shiliu([ arr[i][0], arr[i][1], arr[i][2] ]);
                                ysdaima = '#' + ysdaima.join('');
                                color = ysdaima;
                            }else{
                                color = "rgb(" + arr[i][0] + "," + arr[i][1] + "," + arr[i][2] + ")";
                            }
                            dom = dom + "<div class='rongqi'><div class='yanse' title='点击切换' style='background:" + color + ";'></div><div class='daima' title='点击复制'>" + color + "</div></div>";
                            arr[i][0] = 0;
                            arr[i][1] = 0;
                            arr[i][2] = 0;
                            arr[i][3] = 0;
                        }
                    }
                    document.getElementById("quanbu").innerHTML = dom;
                }
                
                function shiliu(shuzu){//十进制转十六进制
                    function shilius(shu)
                    {
                        var yushu = 0;
                        var jieguo = "";
                        if(shu == 0){return "00";}
                        while(shu != 0)
                        {
                            yushu = shu % 16;
                            shu = (shu - yushu)/16;
                            if(yushu!=0){ jieguo = jieguo + code[yushu-1]; }
                            else{ jieguo = jieguo + '0'; }
                        }
                        if(jieguo.length == 1){ jieguo = jieguo + '0'; }
                        return jieguo.split('').reverse().join('');
                    }
                    shuzu[0] = shilius(shuzu[0]);
                    shuzu[1] = shilius(shuzu[1]);
                    shuzu[2] = shilius(shuzu[2]);
                    return shuzu;
                }
                
                //头像美化
                var bhuaban = document.getElementById("bhuaban");
                var bcax = bhuaban.getContext("2d");
                var bhuabans = document.getElementById("bhuabans");
                var bcaxs = bhuabans.getContext("2d");
                var ispressthe = 0;//代表是否按下鼠标，0代表没有，1代表已经按下
                var ctwox = 0;//第二个canvas的x坐标
                var ctwoy = 0;//第二个canvas的y坐标
                var downx = 0;//鼠标按下的x坐标
                var downy = 0;//鼠标按下的y坐标
                var x = 0;//移动之后的x坐标
                var y = 0;//移动之后的y坐标
                var xx = 0;//用于存储两点之间的x偏移量
                var yy = 0;//用于存储两点之间的y偏移量
                var ctwowh = 200;//第二个canvas的宽度和高度
                var y1 = document.getElementsByClassName("logokuang")[0];
                var y2 = document.getElementsByClassName("logokuang")[1];
                var y3 = document.getElementsByClassName("logokuang")[2];
                var y4 = document.getElementsByClassName("logokuang")[3];
                var btemp = y1;
                var imgstate = "./images/1.png";
                
                document.getElementsByClassName("logos")[0].onclick = function(){//手动触发input的click事件
                    document.getElementById("logo").click();
                }
                
                document.getElementById("logo").onchange = function(){//头像被上传后，显示到canvas
                    document.getElementsByClassName("logos")[0].style.display = "none";
                    document.getElementsByClassName("bhb")[0].style.display = "block";
                    bhuabans.width = ctwowh;
                    bhuabans.height = ctwowh;
                    
                    var reader = new FileReader();
                    reader.readAsDataURL(this.files[0]);
                    reader.onload = function(){
                       imgload(reader.result, bcax, 300);
                       imgload(imgstate, bcaxs, ctwowh);
                    };
                    
                    ctwox = bhuabans.getBoundingClientRect().x - bhuaban.getBoundingClientRect().x;
                    ctwoy = bhuabans.getBoundingClientRect().y - bhuaban.getBoundingClientRect().y;
                }
                
                function imgload(isrc, iobject, ikg, x = 0, y = 0, fun = function(){}){//封装把图片对象绘制到canvas，参数（图片地址，canvas2d对象，宽高，x坐标，y坐标，回调函数）
                    var image = new Image();
                    image.src = isrc;
                    image.onload = function(){
                        iobject.drawImage(image, x, y, ikg, ikg);
                        fun();
                    }
                }
                        
                bhuabans.onmousedown = function(event){//鼠标按下
                    var event = event || window.event;
                    downx = event.screenX;
                    downy = event.screenY;
                    ispressthe = 1;
                }
                
                bhuabans.onmousemove = function(event){//移动第二个canvas
                    var event = event || window.event;
                    if(ispressthe){
                        x = event.screenX;
                        y = event.screenY;
                        xx = x - downx;
                        yy = y - downy;
                        ctwox = ctwox + xx;
                        ctwoy = ctwoy + yy;
                        downx = x;
                        downy = y;
                        canvasposition();
                    }
                }
                
                bhuabans.onmouseup = function(event){//鼠标抬起
                    ispressthe = 0;
                }
                bhuaban.onmouseup = function(event){//鼠标抬起
                    ispressthe = 0;
                }
                
                document.getElementsByClassName("thesize")[0].onclick = function(){//增大
                    ctwowh = ctwowh + 10;
                    imgload(imgstate, bcaxs, ctwowh);
                    bhuabans.width = ctwowh;
                    bhuabans.height = ctwowh;
                }
                
                document.getElementsByClassName("thesize")[1].onclick = function(){//减小
                    ctwowh = ctwowh - 10;
                    imgload(imgstate, bcaxs, ctwowh);
                    bhuabans.width = ctwowh;
                    bhuabans.height = ctwowh;
                }
                
                document.getElementsByClassName("thesize")[2].onclick = function(){//默认位置和大小
                    ctwowh = 300;
                    ctwox = 0;
                    ctwoy = 0;
                    imgload(imgstate, bcaxs, 300);
                    bhuabans.width = 300;
                    bhuabans.height = 300;
                    canvasposition();
                }
                
                y1.onclick = function(){
                    imgstate = "./images/1.png";
                    icss(y1);
                    canvasposition();
                    clearctwo();
                }
                
                y2.onclick = function(){
                    imgstate = "./images/2.png";
                    icss(y2);
                    canvasposition();
                    clearctwo();
                }
                
                y3.onclick = function(){
                    imgstate = "./images/3.png";
                    icss(y3);
                    canvasposition();
                    clearctwo();
                }
                
                y4.onclick = function(){
                    imgstate = "./images/4.png";
                    icss(y4);
                    canvasposition();
                    clearctwo();
                }
                
                function icss(obj){//封装切换样式，参数（对象）
                    obj.style.background = "#408080";
                    obj.style.color = "white";
                    if(btemp && btemp != obj){
                        btemp.style.background = "white";
                        btemp.style.color = "black";
                    }
                    btemp = obj;
                }
                
                function canvasposition(){//封装调整第二个画板位置
                    bhuabans.style.left = ctwox + "px";
                    bhuabans.style.top = ctwoy + "px";
                }
                
                function clearctwo(){//封装清屏第二个画板并重新绘制
                    bcaxs.clearRect(0, 0, ctwowh, ctwowh);
                    imgload(imgstate, bcaxs, ctwowh);
                }
                
                document.getElementsByClassName("generate")[0].onclick = function(){//生成最终头像
                    imgload(imgstate, bcax, ctwowh, ctwox, ctwoy, function(){
                        var temp = bhuaban.toDataURL("image/png");
                        var a = document.createElement("a");
                        rbeautify.appendChild(a);
                        a.href = temp;
                        a.download = "加框头像.png";
                        a.click();
                        bhuabans.style.display = "none";
                        document.getElementsByClassName("setcss")[0].style.display = "none";
                        document.getElementsByClassName("setthesize")[0].style.display = "none";
                        document.getElementsByClassName("generate")[0].style.display = "none";
                        document.getElementsByClassName("generates")[0].style.display = "block";
                    });
                }
                
                document.getElementsByClassName("generates")[0].onclick = function(){//重新生成
                        location.reload();
                }
                
                //滤镜效果
                var chuaban = document.getElementById("chuaban");
                var ccax = chuaban.getContext("2d");
                var cxiangsu = null;//图片像素信息
                var cxs = [];//备份的像素信息
                var photoscss = document.getElementsByClassName("photocss");
                var filterstate = 0;//保存滤镜状态,默认原图
                
                document.getElementsByClassName("clogos")[0].onclick = function(){//手动触发input的click事件
                    document.getElementById("photo").click();
                }
                
                document.getElementById("photo").onchange = function(){//头像被上传后，显示到canvas
                    document.getElementsByClassName("clogos")[0].style.display = "none";
                    document.getElementsByClassName("cbhb")[0].style.display = "block";
                    var reader = new FileReader();
                    reader.readAsDataURL(this.files[0]);
                    reader.onload = function(){
                        var image = new Image();
                        image.src = reader.result;
                        image.onload = function(){
                            chuaban.width = this.width;
                            chuaban.height = this.height;
                            ccax.drawImage(image, 0, 0, this.width, this.height);
                            cxiangsu = ccax.getImageData(0, 0, this.width, this.height);
                            for(let i = 0, len = cxiangsu.data.length, temp = cxiangsu.data; i < len; ++i){
                                cxs.push(temp[i]);
                            }
                        };
                    };
                }
                
                function restore(){//初始化像素信息
                    var temp = cxiangsu.data;
                    for(let i = 0, len = cxs.length; i < len; ++i){
                        temp[i] = cxs[i];
                    }
                }
                
                function filters(k){//封装 各种滤镜切换时的样式
                    photoscss[filterstate].style.background = "white";
                    photoscss[filterstate].style.color = "#EA7500";
                    photoscss[k].style.background = "#EA7500";
                    photoscss[k].style.color = "white";
                    filterstate = k;
                }
                
                photoscss[0].onclick = function(){//原图
                    restore();
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(0);
                }
                
                photoscss[1].onclick = function(){//灰度滤镜
                    restore();
                    var temp = cxiangsu.data;
                    for(let i = 0, len = chuaban.width * chuaban.height * 4; i < len; i = i + 4){
                        var average = parseInt(0.3*temp[i] + 0.59*temp[i+1] + 0.11*temp[i+2]);
                        temp[i] = temp[i+1] = temp[i+2] = average;
                    }
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(1);
                }
                
                photoscss[2].onclick = function(){//黑白滤镜
                    restore();
                    var temp = cxiangsu.data;
                    for(let i = 0, len = chuaban.width * chuaban.height * 4; i < len; i = i + 4){
                        var average = parseInt((temp[i] + temp[i+1] +temp[i+2])/3);
                        if(average >= 100){
                            temp[i] = temp[i+1] = temp[i+2] = 255;
                        }else{
                            temp[i] = temp[i+1] = temp[i+2] = 0;
                        }
                    }
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(2);
                }
                
                photoscss[3].onclick = function(){//底片滤镜
                    restore();
                    var temp = cxiangsu.data;
                    for(let i = 0, len = chuaban.width * chuaban.height * 4; i < len; i = i + 4){
                        temp[i] = 255 - temp[i];
                        temp[i+1] = 255 - temp[i+1];
                        temp[i+2] = 255 - temp[i+2];
                    }
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(3);
                }
                
                photoscss[4].onclick = function(){//去色滤镜
                    restore();
                    var temp = cxiangsu.data;
                    for(let i = 0, len = chuaban.width * chuaban.height * 4; i < len; i = i + 4){
                        var max = 0, min = 0, avg = 0;
                        if(temp[i] > temp[i+1]){
                            if(temp[i] > temp[i+2]){
                                max = temp[i+1];
                                if(temp[i+1] > temp[i+2]){min = temp[i+2];}
                                else{min = temp[i+1];}
                            }else{
                                min = temp[i+1];
                                max = temp[i+2];
                            }
                        }else{
                            if(temp[i+1] > temp[i+2]){
                                max = temp[i+1];
                                if(temp[i] > temp[i+2]){min = temp[i+2];}
                                else{min = temp[i];}
                            }else{
                                max = temp[i+2];
                                min = temp[i];
                            }
                        }
                        avg = parseInt((max + min)/2);
                        temp[i] = temp[i+1] = temp[i+2] = avg;
                    }
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(4);
                }
                
                photoscss[5].onclick = function(){//单色滤镜（红色）
                    restore();
                    var temp = cxiangsu.data;
                    for(let i = 0, len = chuaban.width * chuaban.height * 4; i < len; i = i + 4){
                        temp[i+1] = 0;
                        temp[i+2] = 0;
                    }
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(5);
                }
                
                photoscss[6].onclick = function(){//单色滤镜（绿色）
                    restore();
                    var temp = cxiangsu.data;
                    for(let i = 0, len = chuaban.width * chuaban.height * 4; i < len; i = i + 4){
                        temp[i] = 0;
                        temp[i+2] = 0;
                    }
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(6);
                }
                
                photoscss[7].onclick = function(){//单色滤镜（蓝色）
                    restore();
                    var temp = cxiangsu.data;
                    for(let i = 0, len = chuaban.width * chuaban.height * 4; i < len; i = i + 4){
                        temp[i] = 0;
                        temp[i+1] = 0;
                    }
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(7);
                }
                
                photoscss[8].onclick = function(){//怀旧滤镜
                    restore();
                    var temp = cxiangsu.data;
                    for(let i = 0, len = chuaban.width * chuaban.height * 4; i < len; i = i + 4){
                        temp[i] = parseInt(0.393*temp[i] + 0.769*temp[i+1] + 0.189*temp[i+2]);
                        temp[i+1] = parseInt(0.349*temp[i] + 0.686*temp[i+1] + 0.168*temp[i+2]);
                        temp[i+2] = parseInt(0.272*temp[i] + 0.534*temp[i+1] + 0.131*temp[i+2]);
                    }
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(8);
                }
                
                photoscss[9].onclick = function(){//熔铸滤镜
                    restore();
                    var temp = cxiangsu.data;
                    for(let i = 0, len = chuaban.width * chuaban.height * 4; i < len; i = i + 4){
                        temp[i] = parseInt(temp[i]*128/(temp[i+1] + temp[i+2] + 1));
                        temp[i+1] = parseInt(temp[i+1]*128/(temp[i] + temp[i+2] + 1));
                        temp[i+2] = parseInt(temp[i+2]*128/(temp[i+1] + temp[i] + 1));
                    }
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(9);
                }
                
                photoscss[10].onclick = function(){//冰冻滤镜
                    restore();
                    var temp = cxiangsu.data;
                    for(let i = 0, len = chuaban.width * chuaban.height * 4; i < len; i = i + 4){
                        temp[i] = parseInt(Math.abs(temp[i]-temp[i+1]-temp[i+2])*3/2);
                        temp[i+1] = parseInt(Math.abs(temp[i+1]-temp[i]-temp[i+2])*3/2);
                        temp[i+2] = parseInt(Math.abs(temp[i+2]-temp[i+1]-temp[i])*3/2);
                    }
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(10);
                }
                
                photoscss[11].onclick = function(){//连环画滤镜
                    restore();
                    var temp = cxiangsu.data;
                    for(let i = 0, len = chuaban.width * chuaban.height * 4; i < len; i = i + 4){
                        temp[i] = parseInt(Math.abs(temp[i+1]-temp[i+2]+temp[i+1]+temp[i])*temp[i]/256);
                        temp[i+1] = parseInt(Math.abs(temp[i+2]-temp[i+1]+temp[i+2]+temp[i])*temp[i]/256);
                        temp[i+2] = parseInt(Math.abs(temp[i+2]-temp[i+1]+temp[i+2]+temp[i])*temp[i+1]/256);
                    }
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(11);
                }
                
                photoscss[12].onclick = function(){//浮雕滤镜
                    restore();
                    var temp = cxiangsu.data;
                    for(let i = 0, len = chuaban.width * chuaban.height * 4; i < len - 1; i = i + 4){
                        temp[i] = temp[i] - temp[i+4] + 128;
                        temp[i+1] = temp[i+1] - temp[i+5] + 128;
                        temp[i+2] = temp[i+2] - temp[i+6] + 128;
                    }
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(12);
                }
                
                photoscss[13].onclick = function(){//暗调滤镜
                    restore();
                    var temp = cxiangsu.data;
                    for(let i = 0, len = chuaban.width * chuaban.height * 4; i < len - 1; i = i + 4){
                        temp[i] = parseInt(temp[i]*temp[i]/255);
                        temp[i+1] = parseInt(temp[i+1]*temp[i+1]/255);
                        temp[i+2] = parseInt(temp[i+2]*temp[i+2]/255);
                    }
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(13);
                }
                
                photoscss[14].onclick = function(){//透明滤镜
                    restore();
                    var temp = cxiangsu.data;
                    for(let i = 0, len = chuaban.width * chuaban.height * 4; i < len - 1; i = i + 4){
                        temp[i+3] = 120;
                    }
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(14);
                }
                
                photoscss[15].onclick = function(){//霓虹滤镜
                    restore();
                    var temp = cxiangsu.data;
                    var w = cxiangsu.width;
                    for(let i = 0, len = chuaban.width * (chuaban.height-1) * 4; i < len - 1; i = i + 4){
                        if((i+1)%w == 0){}
                        else{
                            temp[i] = parseInt(2*Math.sqrt((temp[i]-temp[i+4])*(temp[i]-temp[i+4])+(temp[i]-temp[i+4*w])*(temp[i]-temp[i+4*w])));
                            temp[i+1] = parseInt(2*Math.sqrt((temp[i+1]-temp[i+5])*(temp[i+1]-temp[i+5])+(temp[i+1]-temp[i+1+4*w])*(temp[i+1]-temp[i+1+4*w])));
                            temp[i+2] = parseInt(2*Math.sqrt((temp[i+2]-temp[i+6])*(temp[i+2]-temp[i+6])+(temp[i+2]-temp[i+2+4*w])*(temp[i+2]-temp[i+2+4*w])));
                        }
                        if(temp[i]>255){temp[i] = 255;}
                        if(temp[i+1]>255){temp[i+1] = 255;}
                        if(temp[i+2]>255){temp[i+2] = 255;}
                    }
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(15);
                }
                
                photoscss[16].onclick = function(){//抖音红滤镜
                    restore();
                    var temp = cxiangsu.data;
                    for(let i = 0, len = chuaban.width * chuaban.height * 4; i < len; i = i + 4){
                        var average = parseInt((temp[i] + temp[i+1] +temp[i+2])/3);
                        if(average >= 100){
                            temp[i] = temp[i+1] = temp[i+2] = 255;
                        }else{
                            temp[i] = 255;
                            temp[i+1] = 43;
                            temp[i+2] = 99;
                        }
                    }
                    ccax.putImageData(cxiangsu, 0, 0);
                    filters(16);
                }
                
                document.getElementsByClassName("downloadimg")[0].onclick = function(){//生成最终滤镜效果
                    var temp = chuaban.toDataURL("image/png");
                    var a = document.getElementById("downf");
                    a.href = temp;
                    a.click();
                }
                
            })();
        </script>
    </body>
</html>