@adeelasif/awesome-editor/src/components/Editor/Actions/Adjustments.jsx

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 (
    <Segment className="filter-menu">
      {ImageFilters.map((filter, index) => (
        <div key={index}>
          <p>{filter.name}</p>
          <InputSlider
            onChange={(value) => {
              setAdjustmentValues({
                ...adjustmentValues,
                [filter.action]: value,
              });
              applyFilter(filter.action, value);
            }}
          />
        </div>
      ))}
    </Segment>
  );
};

export default Adjustments;