Как применять фильтры друг над другом в Camanjs? - PullRequest
Новая
       12

Как применять фильтры друг над другом в Camanjs?

1 голос
/ 03 июля 2019

У меня есть несколько вопросов, касающихся библиотеки Camanjs.

1. Как мы можем импортировать camanjs в React?Я попытался установить caman через npm, но безуспешно, я также установил все упомянутые зависимости дополнения (node-gyp & Installing GTK 2), но, похоже, ничего не работает.Так кто-нибудь знает, как использовать Camanjs в React ??.

2. Сценарий: я применил яркость (10), а затем контраст (10), используя camanjs.

Проблема Теперь, если я применяю яркость, это работает нормально, но когда я применяю контраст, он удаляет яркость и применяет только контраст.Это должно быть потому, что я использую revert (false) перед применением любого нового фильтра. 

 this.revert(false)

Я хочу применить оба фильтра одновременно.Как я могу это сделать.Может ли это быть достигнуто с помощью this.newLayer(function(){}) с некоторым blendingMode?

Или мне нужно сохранить значение фильтров в некотором массиве, а затем зациклить и применить фильтры, а затем визуализировать canvas?

Я также пыталсяиспользовать 

 this.reloadCanvasData();

Хотя это сработало, но когда я уменьшил значение яркости и контрастности до 0, в идеале должно получиться исходное изображение, но вместо этого холст станет серым или черным.

МожетКто-нибудь мне поможет или предоставит подходящий подход для решения этой проблемы.Заранее спасибо!!Примечание. В приведенном ниже коде вы видите, что поскольку я не смог установить camanjs через npm, мне нужно перенести его в объект окна через CDN.Это работает, но создайте «эту» проблему, если я попытаюсь использовать «это» внутри 

this.newLayer(function(){
/*Somewhere here(this refers to React component instead of  Caman) */
})

Мой код: 

 onChangeHandler = (e, val) => {
    e.persist();
    let valInLowercase = 'stackBlur';
    if(val !== 'Blur'){
     valInLowercase = val.toLowerCase();
  }
    let canvas = document.querySelector("canvas")
    let canavsID = canvas.getAttribute("id");
    canavsID = "#" + canavsID;
    window.caman(canavsID, function() {
      this.revert(false)
      this.reloadCanvasData();
        if (val !== "Contrast") {
          this[valInLowercase](e.target.value).render();
        } else {
            if(val === 'Contrast'){
              this[valInLowercase](e.target.value/2).render();  
            }
        }
      })

    if(e.type === "mouseup"){
        canvas.setAttribute(valInLowercase, e.target.value)
    }
  };
...