[英]Apply filters from an array in CamanJS
我想存储由不同按钮应用的所有过滤器,然后按顺序应用于图像。 例如,如果用户点击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/
任何人都可以指导我如何实现我想要的? 如果我没有在低调之前清楚地解释这个问题,请告诉我。
这错误显示出来,因为当你使用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
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();
});
您可以使用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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.