How to add multiple filters (Caman.js)?

Question

Im recently working with face detection algorithms, and i want to add some filters on the canvas while the detection algorithms are running. I created a modal as you can see in FIGURE 1, which works either with sample or custom filters (Caman.js Library)

When a selection is made I want to add the filters in the canvas or cancel the filters. There are 2 options:

1) CONFIRM BUTTON:

/* 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) CANCEL BUTTON:

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

---

For now i tried to work on an image element, which works great but only by checking all the elements individually. The more filters added - the more if/else-if statements should be made:

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

---

My question:

Is there any ways that I can pass a string value in the specific library (Caman.js), since all the filters are functions in the library and something.render() obviously will not work?

For example:

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

Answer 1

This tutorial helped me find a solution.

Solution:

• First add the selected filters in an array list:

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

• For each element you should create a Caman Function and check if every filter of the list (text value) is contained in the Caman.js Library (function name). I used:

   if( array[i] in this) statement 

• This would check the text value of the filter if its contained in this which is in this case Caman.js. Be careful what .this you should be using to make this work.

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

• After checking if the filter exist, the filter has to be prepared first in a specific syntax way to work:

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

• Don't forget to render():

   this.render(); 

---

Complete Example:

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

---

Results:

Case "vintage":

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

Case "filter331":

alert("filter not in the list");