@adeelasif/awesome-editor/dist/Editor/Actions/Adjustments.js

A full fledge web based photo editor

import React from "react";
import "semantic-ui-css/semantic.min.css";
import { Segment } from "semantic-ui-react";
import InputSlider from "../../InputSlider";
import _ from "lodash"; // Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
// Modal.setAppElement('#yourAppElement')

const ImageFilters = [{
  name: "brightness",
  action: "brightness"
}, {
  name: "contrast",
  action: "contrast"
}, {
  name: "saturation",
  action: "saturation"
}, {
  name: "vibrance",
  action: "vibrance"
}, {
  name: "exposure",
  action: "exposure"
}, {
  name: "hue",
  action: "hue"
}, {
  name: "sepia",
  action: "sepia"
}, {
  name: "gamma",
  action: "gamma"
}, {
  name: "noise",
  action: "noise"
}, {
  name: "clip",
  action: "clip"
}, {
  name: "sharpen",
  action: "sharpen"
}, {
  name: "stackBlur",
  action: "stackBlur"
}];
export const Adjustments = props => {
  const {
    canvasId
  } = props;
  const [adjustmentValues, setAdjustmentValues] = React.useState({
    brightness: 0,
    contrast: 0,
    saturation: 0,
    vibrance: 0,
    exposure: 0,
    hue: 0,
    sepia: 0,
    gamma: 0,
    noise: 0,
    clip: 0,
    sharpen: 0,
    stackBlur: 0
  });

  const applyFilter = (filter, value) => {
    global.Caman(`#${canvasId}`, props.image, function () {
      this.revert();

      _.keys(adjustmentValues).forEach(_filter => {
        const filterValue = adjustmentValues[_filter];
        filterValue !== 0 && this[_filter](filterValue);
      });

      this.render();
    });
  };

  return /*#__PURE__*/React.createElement(Segment, {
    className: "filter-menu"
  }, ImageFilters.map((filter, index) => /*#__PURE__*/React.createElement("div", {
    key: index
  }, /*#__PURE__*/React.createElement("p", null, filter.name), /*#__PURE__*/React.createElement(InputSlider, {
    onChange: value => {
      setAdjustmentValues({ ...adjustmentValues,
        [filter.action]: value
      });
      applyFilter(filter.action, value);
    }
  }))));
};
export default Adjustments;