Редактирование и фильтрация не работают с помощью Camanjs

Question

Я создаю редактор изображений, поэтому, когда пользователь нажимает на изображение, он получает такие параметры, как яркость, насыщенность и т. Д. Все эти параметры являются ползунками, поэтому яркость или насыщенность будут меняться в зависимости от значения ползунка.

Проблема обнаружена : при установке яркости тег img преобразуется в canvas , и изображение становится белым, и после этого ничего не происходит.

Должен ли я использовать холст тег вместо img или есть какой-то другой способ решить эту проблему?

Ниже мой код:

Adjust.jsx(Adjust component)
import React, {Component} from 'react';
import './Adjust.css'
import Slider from '../slider/slider';
import $ from "jquery";
class Adjust extends Component {
    constructor(props) {
        super(props);
        this.state = {  
          adjust : [
              {
                  "name": "Brightness",
                  "range" : 0
              },
              {
                "name": "Saturation",
                "range" : 0
            }
          ]
    }
    } 
    slidderChangeHandler = (event, element) => {
        event.persist();
        let adjust = [...this.state.adjust];
        adjust.map((el) => {
            if(el.name === element.name){
              el.range = event.target.value
            }
        })
        this.setState({ adjust: adjust }, () => {
           let imgId = '#' + $(this.props.selected).children().attr('id');
            window.caman(imgId,  function() {

              if(element.name === 'Brightness'){  
              this.brightness(parseFloat(element.range)).render()
            }
            if(element.name === 'Saturation'){  
                console.log(parseFloat(element.range));
          }
            })
        });
    }
    render() { 
        let slider = this.state.adjust.map((element, i) => {
          return (
              <Slider SliderRange={element} 
              draggging={(event, element) => this.slidderChangeHandler(event, element)}
              key={element.name + i}
              />
          )
        })
        return ( 
            <div className="adjust-main-container">
                {slider}
                </div >
         );
    }

}

export default Adjust;

Этот компонент в конечном итоге отображается в моем компоненте App.js:

App.js

import React, { Component } from "react";
import "./App.css";
import $ from "jquery";
import "jquery-ui/ui/widgets/draggable";
import DragSelect from "dragselect";
import Button from "./components/Button/Button";
import Slider from "./components/slider/slider";
import Dropdown from "./components/Dropdown/dropdown";
import Adjust from './components/Adjust/Adjust';
// import Caman from 'caman'

// --> OFF'

/* eslint no-undef: 0 */
// eslint-disable-next-line
class App extends Component {
  state = {
    btn: [
      { value: "Add Element", id: "" },
      { value: "Wrap", id: "group" },
      { value: "Unwrap", id: "ungroup" },
      { value: "unwrapPerm", id: "ungroupIndivi" },
      { value: "Delete", id: "delete" },
      { value: "Copy", id: "copy" },
      { value: "Adjust", id: "adjust" }
      // { value: "Undo", id: "undo" },
      // { value: "Redo", id: "redo" }
    ],
    dropdown: [
      { value: "Postion", id: "" },
      { value: "Forwards", id: "fwd" },
      { value: "To Front", id: "front" },
      { value: "Backwards", id: "bkwd" },
      { value: "To Back", id: "Back" },
      { value: "Top", id: "top" },
      { value: "Middle", id: "middle" },
      { value: "Bottom", id: "bottom" },
      { value: "Left", id: "left" },
      { value: "Centre", id: "centre" },
      { value: "Right", id: "right" }
    ],
    slidder: {
      range: 0,
      selected: []
    },
    flip: [
      { value: "Flip", id: "" },
      { value: "Horizontal", id: "hori" },
      { value: "Vertical", id: "veri" }
    ],
    adjust: false
  };
  constructor(props) {
    super(props);
    var ds;
    this.ds = ds;
    var permID, deleteElm, history;
    this.copyArr = [];
    this.positionElement = "";
    this.history = history;
    this.deleteElm = deleteElm;
    Array.prototype.hasMin = function(attrib) {
      return this.reduce(function(prev, curr) {
        return prev[attrib] < curr[attrib] ? prev : curr;
      });
    };

    Array.prototype.hasMax = function(attrib) {
      return this.reduce(function(prev, curr) {
        return prev[attrib] > curr[attrib] ? prev : curr;
      });
    };
    window.caman = Caman;
  }

  componentDidMount() {   
    var idArray = [];
    var permIdarray = [];
    this.ds = new DragSelect({
      selectables: document.getElementsByClassName("ele-select"),
      area: document.getElementById("canvas"),
      onElementSelect: element => {
        if($(element).attr('class').indexOf('flippable') > -1 && $(element).children()[0].nodeName === 'IMG'){

              $('#adjust').css({
                opacity : 1
              })

        }
        this.positionElement = element;
        let slidder = { ...this.state.slidder };
        slidder.selected.push(element);
        slidder.range = Math.trunc($(element).css("opacity") * 100);
        this.setState({
          slidder: slidder
        });
        idArray.push(this.ds.getSelection());
        this.copyArr.push(this.ds.getSelection());
      }
    });
    $(".text").draggable({
      cursor: "move"
    });

    $("#canvas").on("mousedown", ".main-container", e => {
      $("#ungroupIndivi").css({
        opacity: 0
      });
      $("#delete").css({
        opacity: 0
      });
      $('#adjust').css({
        opacity : 0
      })
      let slidder = { ...this.state.slidder };
      slidder.selected = [];
      this.setState({
        slidder: slidder,
        adjust: false
      });
      if (
        $(e.target)
          .attr("class")
          .indexOf("main-container") > -1 &&
        $(e.target)
          .attr("class")
          .indexOf("flippable-ele") <= -1 &&
        $(e.target)
          .attr("class")
          .indexOf("flippable") <= -1
      ) {
        if ($(".wrapped").length > 0) {
          this.unwrapAll();
        }
        this.ds.start();
      } else {
        this.deleteElm = e.target;
        $("#delete").css({
          opacity: 1
        });
        if (
          $(e.target)
            .parent()
            .attr("class")
            .indexOf("perm") > -1 ||   $(e.target)
            .attr("class")
            .indexOf("perm") > -1 || ( $(e.target)
            .attr("class")
            .indexOf("flippable-ele") > -1 && $(e.target)
            .parent()
            .attr("class")
            .indexOf("perm") > -1) 
        ) {
          $("#ungroupIndivi").css({
            opacity: 1
          });
        }
        idArray = [];
        this.ds.stop();
        this.ds.break();
      }
    });
    $("#canvas").on("mouseup", e => {
      if (idArray.length > 1) {
        this.check(idArray);
      }
      this.ds.stop();
      this.ds.start();
    });

    var map = {}; // You could also use an array
    onkeydown = onkeyup = event => {
      /*  event = event || event; // to deal with IE */
      map[event.keyCode] = event.type == "keydown";
      this.keyEventCheck(event, map);
    };
  }


    return (
      <React.Fragment>
        {button}
        <Dropdown
          dropdown={this.state.dropdown}
          dropdownClick={this.dropdownClickHandler}
        />
        <Dropdown
          dropdown={this.state.flip}
          dropdownClick={this.dropdownClickHandler}
        />
        {this.state.slidder.selected.length > 0 ? (
          <Slider
            SliderRange={this.state.slidder}
            draggged={event => this.slidderChangeHandler(event)}
          />
        ) : null}
        {
          this.state.adjust ? <Adjust selected={this.deleteElm}/> :  null 
        }
        <div id="canvas">
          <div className="main-container">
            <div className="text ele-select" id="text1" draggable="true">
              Some text
            </div>
            <div className="text ele-select" id="text2" draggable="true">
              Another text
            </div>
            <div className="text ele-select flippable" id="text3">
              <img
                id="img-01"
                className="flippable-ele"
                src={require("./assets/imgage1.jpeg")}
                alt="Italian Trulli"
                width="70px"
                height="70px"
              />
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}
export default App;