javascript - 在 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不是一个函数。我可以使用注释掉的行，但这只会应用预定的过滤器。我想根据用户选择应用过滤器，并且当用户单击“应用过滤器”时立即应用所有过滤器。

这是该库的链接: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 的循环内部