如何添加多个过滤器（Caman.js）？

Question

我最近正在使用面部检测算法，我想在检测算法运行时在画布上添加一些过滤器。 我创建了一个模态，如图1所示，它可以与示例或自定义过滤器一起使用（Caman.js库）

做出选择后，我想在画布中添加过滤器或取消过滤器。有2个选项：

1）确认按钮：

/* PREPARE ARRAYS */
//SAMPLE FILTERS (vintage = true sunrise = true)
var array1 = [vintage, sunrise, .../* selected values*/ ]; 

//CUSTOM FILTERS (vintage = 0.4, sunrise = 0.8) 
var array2 = [0.4,0.8, .../* selected values*/ ]; 

2）取消按钮：

/* RESETS ARRAYS */
array1.length = 0;
array2.length = 0;

---

现在，我尝试处理图像元素，该图像效果很好，但只能单独检查所有元素。添加的过滤器越多-应该执行的if / else-if语句越多：

if(array1.contains("vintage")){
   Caman('#myIcon', function(){
      this.vintage().render(); /*.vintage & anyFilter is in Caman.js API */
   });
}else if(array1.contains("sunrise")){
  //.....etc
}

---

我的问题：

我是否可以通过任何方式在特定的库（Caman.js）中传递字符串值，因为所有过滤器都是该库中的函数，而something.render（）显然不起作用？

例如：

function apply_Filters (*MY_FILTER_DATA*) {
    Caman('#myIcon', function(){
        this.*MY_FILTER_DATA*.render();
} 

Answer 1

这个tutorial帮助我找到了解决方案。

解决方案：

• 首先将选定的过滤器添加到数组列表中：

  myFiltersList = [ "vintage", "filter331" ];
  

• 您应该为每个元素创建一个Caman函数，并检查Caman.js库（函数名称）中是否包含列表的每个过滤器（文本值）。我用过：

  if( array[i]   in this) statement
  

• 如果此过滤器的文本值包含 （在本例中为Caman.js），它将检查过滤器的文本值。请注意您应该使用什么 .this 来完成这项工作。

  if(filtersList[i] in this) //in this  = in Caman.js
  

• 在检查过滤器是否存在之后，必须首先以特定的语法方式准备过滤器才能工作：

  this[ filtersList[i] ] (); //or this["vintage"](); or this.vintage();
  

• 别忘了render（）：

  this.render();
  

---

完整示例：

//For each filter in the list
myFiltersList.forEach( function() {

    //Open Caman Function and Reference the 2D canvas
    Caman('#myCanvas', function () {

        //Check if the current filter is declared within the library Caman.js
        if(myFiltersList[i] in this){

            alert("filter in the list");

            //Add filter from this as filter in Caman function/
            this[myFiltersList[i]]().render();

            i++; //Increase counter
        }else{
            alert("filter not in the list");
        }
    });
});

---

结果：

案例“年份”：

alert("filter in the list");
this[myFiltersList[i]]().render();
i++;

案例“ filter331”：

alert("filter not in the list");