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