在CamanJS中應用數組中的過濾器

Question

我想存儲由不同按鈕應用的所有過濾器，然后按順序應用於圖像。 例如，如果用戶點擊Brigthness，Noise，Contrast。 我想存儲這些過濾器，一旦用戶點擊“應用過濾器”。 我想全部應用它們。 我嘗試了以下方法：

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

但這給了我錯誤this.filters is not a function 。 我可以使用注釋掉的行，但這只會應用預定的過濾器。 我想根據用戶選擇應用過濾器，我想在用戶點擊應用過濾器時立即應用它們。

這是圖書館的鏈接： http ： //camanjs.com/examples/

任何人都可以指導我如何實現我想要的？ 如果我沒有在低調之前清楚地解釋這個問題，請告訴我。

Answer 1

這錯誤顯示出來，因為當你使用this里面foreach的價值this點濾波器陣列，而不是caman對象試試這個

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();
});

另外，在上述代碼的副本this是由，然后將其傳遞給循環內與名稱作為that

Answer 2

this.filters不起作用，因為'this'指的是function(item, index) {...}的范圍function(item, index) {...}

我會做這樣的事情：

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

您可以使用forEach()在數組中定義對象並循環遍歷效果：

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();
});