Я хочу сохранить все фильтры, примененные разными кнопками, а затем последовательно применить их к изображению. Например, если пользователь нажимает на 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/
Может кто-нибудь, пожалуйста, наведите меня, как я могу достичь того, чего я хочу? Дайте мне знать, если я не объяснил вопрос четко, прежде чем голосовать.
3 ответа
Эта ошибка появляется, потому что когда вы используете 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) {...}
Я бы сделал что-то вроде этого:
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();
});
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.