1

I have few questions regarding Camanjs library.

1. How can we import camanjs in React? I have tried installing caman through npm but no success,I have also installed all the addition dependency mentioned(node-gyp & Installing GTK 2) but nothing seems to work. So does anyone know how to use Camanjs in React??.

2. Scenario: I applied brightness(10) and then contrast(10) using camanjs.

Issue Now if I apply brightness this works fine but when I apply contrast it removes brightness and only applies contrast. This must be because I'm using revert(false) before applying any new filter.

 this.revert(false)

I want to apply both the filters simultaneously. How can I do this. Can this be acheived using the this.newLayer(function(){}) with some blendingMode?

Or I have to save filters value in some array and then loop over and apply filters and then render canvas?

I also tried to use

 this.reloadCanvasData();

Although this worked but when I reduced the value to 0 of both brightness and contrast, ideally it should render original image but instead the canvas turns grey or black.

Can anyone me guide or provide a suitable approach to tackle this problem. Thanks in advance!! Note: In below code you see since I was unable to install camanjs through npm, I have to take it into window object via CDN. This is working but create 'this' issue if I try to use 'this' inside

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

My code:

 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)
    }
  };
Adarsh
  • 19
  • 4

0 Answers0