Anwenden von Filtern aus einem Array in CamanJS

Question

Ich möchte alle Filter speichern, die von verschiedenen Tasten angewendet werden und dann nacheinander auf ein Bild anwenden. Zum Beispiel, wenn ein Benutzer auf Helligkeit, Rauschen, Kontrast klickt. Ich möchte diese Filter speichern und sobald ein Benutzer auf Filter anwenden klickt. Ich möchte sie alle anwenden. Ich habe die folgende Methode versucht:

Caman('#canvas', img, function() { 
    //this.brightness(10).render(); 
    var filters = ["brightness(10)", "noise(20)"]; 
    filters.forEach(function (item, index) { 
      this.filters(item); 
    }); 
    this.render(); 
}); 

Aber das gibt mir den Fehler this.filters is not a function. Ich kann die auskommentierte Zeile verwenden, aber nur vorbestimmte Filter anwenden. Ich möchte Filter basierend auf der Benutzerauswahl anwenden und möchte sie alle auf einmal anwenden, wenn der Benutzer auf Apply-Filter klickt. Hier

ist ein Link zu der Bibliothek: http://camanjs.com/examples/

Kann jemand bitte leite mich, wie kann ich erreichen, was ich will? Lassen Sie es mich wissen, wenn ich die Frage vor der Abstimmung nicht klar erklärt habe.

Answer 1

Dieser Fehler, weil zeigt, wenn Sie this innerhalb foreach der Wert this Punkte der Filteranordnung und nicht caman Objekt verwenden Versuchen Sie, diese

Caman('#canvas', img, function() { 
    //this.brightness(10).render(); 
    var that = this; 
    var filters = ["brightness(10)", "noise(20)"]; 
    filters.forEach(function (item, index) { 
     eval('that.'+item); 
    }); 
    this.render(); 
}); 

In obigen Code eine Kopie this wird, die dann gemacht ist passiert nach innen als that

mit dem Namen der Schleife

Answer 2

this.filters wird nicht funktionieren, weil ‚dies‘ auf den Umfang der function(item, index) {...} bezieht sich

Ich würde so etwas tun:

Caman('#canvas', img, function() { 
    // make 'this' available in the scope through 'self' variable 
    var self = this;  

    // Filters must hold the function and not a string of the function. 
    // so something like: 
    var filters = [ 
     function() { self.brightness(10); }, 
     function() { self.noise(20); } 
    ]; 

    filters.forEach(function (fn) { 
      fn(); // this will execute the anonymous functions in the filters array 
    }); 

    this.render(); 
}); 

Answer 3

Sie Objekte in Ihrem Array und Schleife über die Effekte forEach() Verwendung definieren:

Caman('#canvas', img, function() { 
    var filters = [ 
    { name: "brightness", val:10 }, 
    { name: "noise", val:20 } 
    ]; 
    var that = this; 
    filters.forEach(function(effect) { 
    that[effect.name](effect.val); 
    }); 
    this.render(); 
});