Применить фильтры из массива в 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/

Может кто-нибудь, пожалуйста, наведите меня, как я могу достичь того, чего я хочу? Дайте мне знать, если я не объяснил вопрос четко, прежде чем голосовать.

javascript html5-canvas camanjs

1

Neena Vivek 10 Дек 2016 в 21:28

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

0

Viney 10 Дек 2016 в 19:27

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

0

SagiSergeNadir 10 Дек 2016 в 19:05

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

0

SLePort 10 Дек 2016 в 20:21

Применить фильтры из массива в CamanJS

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript