如何添加多個過濾器（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");