在线编辑图片网站相关（一）CSS滤镜filter与canvas滤镜

最近制作的这个网站决定要加滤镜功能，千辛万苦用css的filter属性做好了，但是绘制到canvas上的时候发现了一个很尴尬的问题：canvas并不支持css滤镜，所以渲染出来的图片上div还是没有加filter的样子。
查了很多，结论是canvas上的滤镜只能转2d对每个像素点操控，用矩阵滤波之类的。
参考网站：https://www.cnblogs.com/fsjohnhuang/p/4127888.html#a2
参考这个网站已经实现了新的滤镜功能并且canvas支持渲染，不过做不到自由调节参数，那个太专业了。

非常可惜，因为css滤镜功能已经做完了，在此做一个记录吧。可以做到直接使用滤镜，以及自由调节亮度灰度等。

第一个是提供已成型滤镜，选中直接用就好。
前面关于opacity的判断是这样的，不知为何对div设置opacity：xx不起作用了，百度得知，这种情况是ie不支持opacity，（但是我用的明明是谷歌）有时候就是这么无解的，要设置两个属性
opacity:xxx
filter: "alpha(opacity=xxx)
这样透明属性就可以用了，但尴尬的是这样一来设置滤镜就会覆盖透明属性，因此在开头设置一个opacitystr截取出filter，防止覆盖。

            $(".sucai_contain_nav .sucainav_item").on("click",function () {
                var index = $(this).index();
                var opacitystr = "";
                if(currentselect.css("filter").indexOf("opacity") != -1) {
                    var split = currentselect.css("filter").split(" ");
                    for (var i = 0; i < split.length; i++) {
                        if (split[i].indexOf("opacity") != -1) {
                            opacitystr = split[i];
                        }
                    }
                }
                if(index==0) {
                    currentselect.css("filter", opacitystr+" grayscale(10%) sepia(1%) saturate(150%)")
                }
                else if(index==1){
                    currentselect.css("filter", opacitystr+" blur(0.5px) contrast(100%) sepia(150%) grayscale(20%)")
                }
                else if(index==2){
                    currentselect.css("filter", opacitystr+" saturate(0%) contrast(160%)")
                }
                else if(index==3){
                    currentselect.css("filter", opacitystr+" saturate(150%) brightness(110%) contrast(200%)")
                }
                else if(index==4){
                    currentselect.css("filter", opacitystr+" saturate(300%) brightness(110%) contrast(200%)")
                }
                else if(index==5){
                    currentselect.css("filter", opacitystr+" hue-rotate(250%) saturate(200%)")
                }
            })

第二个功能是自由调节参数滤镜
这里就是每次获取滑轮的数据，再改变目前选中的filter，关键是它要做成可以叠加的，css的filter滤镜叠加之间是空格。
这里我是这样做的：获取当前选中的filter，使用split分割子串，查询里面有没有目前要改变的属性，如果有，就删掉，再加上新的，如果没有，就直接加上新的。
需要注意的是blur和hue的这两个滤镜单位不是%，要单独拎出来处理，分割子串的函数如下：
用户修改滑轮数据->判断index，分别调用下方的这个函数，传入的name为filter属性（brightness,blur等等），val就是要改的数值。

function filterli(name,val) {
                var thisfilter = currentselect.css("filter");
                var newfilter="";
                if (name=="blur"){
                    if(thisfilter.indexOf(name) != -1){
                        var split = thisfilter.split(" ");
                        for(var i=0;i<split.length;i++){
                            if(split[i].indexOf(name) != -1){
                                /*存在name直接不要了，不存在的加进new里*/
                                /*thisfilter = thisfilter.replace(split[i],"");
                                console.log(thisfilter);*/
                            }else {
                                if(i !=split.length-1){
                                    newfilter +=split[i]+" "
                                }else {
                                    newfilter +=split[i]
                                }
                            }
                        }
                        return newfilter+" "+name+"("+val+"px)"
                    }else{
                        if(thisfilter=="none" || thisfilter==""){
                            return name+"("+val+"%)"
                        }else {
                            return thisfilter+" "+name+"("+val+"px)"
                        }
                    }
                }
                else if(name=="hue-rotate"){
                    if(thisfilter.indexOf(name) != -1){
                        var split = thisfilter.split(" ");
                        for(var i=0;i<split.length;i++){
                            if(split[i].indexOf(name) != -1){
                                /*存在name直接不要了，不存在的加进new里*/
                                /*thisfilter = thisfilter.replace(split[i],"");
                                console.log(thisfilter);*/
                            }else {
                                if(i !=split.length-1){
                                    newfilter +=split[i]+" "
                                }else {
                                    newfilter +=split[i]
                                }
                            }
                        }
                        return newfilter+" "+name+"("+val+")"
                    }else{
                        if(thisfilter=="none" || thisfilter==""){
                            return name+"("+val+"%)"
                        }else {
                            return thisfilter+" "+name+"("+val+"deg)"
                        }
                    }
                }
                else {
                    if(thisfilter.indexOf(name) != -1){
                        var split = thisfilter.split(" ");
                        for(var i=0;i<split.length;i++){
                            if(split[i].indexOf(name) != -1){
                                /*存在name直接不要了，不存在的加进new里*/
                                /*thisfilter = thisfilter.replace(split[i],"");
                                console.log(thisfilter);*/
                            }else {
                                if(i !=split.length-1){
                                    newfilter +=split[i]+" ";
                                }else {
                                    newfilter +=split[i];
                                }
                            }
                        }
                        return newfilter+" "+name+"("+val+"%)"
                    }else{
                        if(thisfilter=="none" || thisfilter==""){
                            return name+"("+val+"%)"
                        }else {
                            return thisfilter+" "+name+"("+val+"%)"
                        }
                    }
                }
            }