如何添加多个过滤器（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

本教程帮助我找到了解决方案。

解：

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

   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");