在 CamanJS 中应用数组中的过滤器

Question

我想存储由不同按钮应用的所有滤镜，然后按顺序应用到图像上。例如，如果用户单击亮度、噪声、对比度。我想存储这些过滤器，一旦用户点击应用过滤器。我想全部应用它们。我尝试了以下方法：

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。我可以使用注释掉的行，但这只会应用预定的过滤器。我想根据用户选择应用过滤器，并且我想在用户点击应用过滤器时立即应用它们。

这是给图书馆的 link：http://camanjs.com/examples/

任何人都可以指导我如何实现我想要的吗？如果我在投票前没有清楚地解释问题，请告诉我。

Answer 1

出现该错误是因为当您在 foreach 中使用 this 时，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) {...}

的范围

我会这样做：

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

在 CamanJS 中应用数组中的过滤器

Apply filters from an array in CamanJS

javascript

html5-canvas

camanjs