I am trying to write a web page which can do some edit to a photo ,like brightness . And I choose a library called Caman.js to achieve my goal .But when I edit the brightness of the photo with this.brightness(…).render() ,I find that the picture could not return to its original state,it will become pure white or black , It seems that the picture has lost a lot of information .
And I find a tutorial on youtube ,and it have the same problem (https://codepen.io/bradtraversy/pen/qoJZBy ). But the example on the official website( http://camanjs.com/examples/ ) is good ,want to know how to do that .
<input type="range" min="0" max="20" value="10" id="slider_bright"/>
<script>
Caman("canvas",image_src,() => {
this.render();
})
const slider_bright = document.getElementById('slider_bright')
var pre_slider_bright_value = 20;
slider_bright.addEventListener('input',()=>{
Caman("canvas",image_src,function () {
if(pre_slider_bright_value<slider_bright.value*1){
//decrease brightness
this.brightness(slider_bright.value*1 - pre_slider_bright_value).render();
}else{
//increase brightness
this.brightness(slider_bright.value*1 - pre_slider_bright_value).render();
}
pre_slider_bright_value = slider_bright.value
})
})
</script>