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

A full fledge web based photo editor

import React from "react";
import Modal from "react-modal";
import "semantic-ui-css/semantic.min.css";
import { Grid, Menu, Segment, Button } from "semantic-ui-react";
import Filters from "./Actions/Filters";
import Banner from "./Actions/Banner";
import Adjustments from "./Actions/Adjustments";
import ReactCrop from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";
import "./Editor.css";
const customStyles = {
  content: {
    top: "10%",
    left: "10%",
    right: "auto",
    bottom: "auto",
    width: "80%",
    height: "80%"
  }
}; // Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)

Modal.setAppElement("body"); // const menuItems = ["Filter", "Adjustments", "Crop", "Mask", "Banner"];

const menuItems = ["Filter", "Adjustments"];

const getFilters = (activeItem, canvasId, imgURL, setActivePreset) => {
  switch (activeItem) {
    case "Filter":
      return /*#__PURE__*/React.createElement(Filters, {
        canvasId: canvasId,
        image: imgURL,
        setActivePreset: setActivePreset
      });

    case "Banner":
    case "Mask":
      return /*#__PURE__*/React.createElement(Banner, {
        canvasId: canvasId,
        image: imgURL,
        setActivePreset: setActivePreset
      });

    case "Adjustments":
      return /*#__PURE__*/React.createElement(Adjustments, {
        canvasId: canvasId,
        image: imgURL,
        setActivePreset: setActivePreset
      });

    default:
      return null;
  }
};

function download(canvas, filename) {
  var e;
  var lnk = document.createElement("a");
  lnk.download = filename;
  lnk.href = canvas.toDataURL("image/jpeg", 0.8);

  if (document.createEvent) {
    e = document.createEvent("MouseEvents");
    e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    lnk.dispatchEvent(e);
  } else if (lnk.fireEvent) {
    lnk.fireEvent("onclick");
  }
}

const saveImage = (canvas, image) => {
  const fileName = image.name;
  var fileExtension = fileName.slice(-4);

  if (fileExtension === ".jpg" || fileExtension === ".png") {
    var actualName = fileName.substring(0, fileName.length - 4);
  }

  download(canvas, actualName + "-edited.jpg");
};

const getImageDimensionsRelativeToCanvas = (canvas, img) => {
  const hRatio = canvas.width / img.width;
  const vRatio = canvas.height / img.height;
  const ratio = Math.min(hRatio, vRatio);
  const centerShift_x = (canvas.width - img.width * ratio) / 2;
  const centerShift_y = (canvas.height - img.height * ratio) / 2;
  return {
    width: img.width * ratio,
    height: img.height * ratio
  };
};

export const Editor = props => {
  const {
    isOpen,
    image
  } = props;
  const [activeItem, setActiveItem] = React.useState(menuItems[0]);
  const [mainCanvas, setMainCanvas] = React.useState();
  const [crop, setCrop] = React.useState({});
  const [loadedImage, setLoadedImage] = React.useState();
  const mainCanvasId = "mainCanvas";
  const imgURL = image ? URL.createObjectURL(image) : "";

  const revertCanvasChanges = canvasId => {
    global.Caman(`#${canvasId}`, imgURL, function () {
      this.revert();
      this.render();
    });
  };

  const getMainCanvas = () => document.getElementById(mainCanvasId);

  const canvasRef = React.useCallback(node => {
    setMainCanvas(node);
  }, []);

  const handleItemClick = (e, {
    name
  }) => setActiveItem(name);

  React.useEffect(() => {
    if (isOpen && image && mainCanvas) {
      const reader = new FileReader();
      const canvas = getMainCanvas();

      if (canvas) {
        const ctx = canvas.getContext("2d");
        const file = image;

        if (file) {
          reader.readAsDataURL(file);
        }

        reader.addEventListener("load", function () {
          const img = new Image();
          img.src = reader.result;

          img.onload = function () {
            const hRatio = canvas.width / img.width;
            const vRatio = canvas.height / img.height;
            const ratio = Math.min(hRatio, vRatio);
            const centerShift_x = (canvas.width - img.width * ratio) / 2;
            const centerShift_y = (canvas.height - img.height * ratio) / 2;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0, img.width, img.height, centerShift_x, centerShift_y, img.width * ratio, img.height * ratio);
          };

          setLoadedImage(img);
        }, false);
      }
    }
  }, [mainCanvas, isOpen, image]);

  const renderActions = () => {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
      onClick: () => revertCanvasChanges(mainCanvasId)
    }, "Revert"), /*#__PURE__*/React.createElement(Button, {
      onClick: () => saveImage(mainCanvas, image)
    }, "Save"));
  };

  const setActivePreset = preset => {};

  const renderFilters = () => {
    return getFilters(activeItem, mainCanvasId, imgURL, setActivePreset);
  };

  return /*#__PURE__*/React.createElement("div", {
    id: "editor"
  }, /*#__PURE__*/React.createElement(Modal, {
    isOpen: props.isOpen,
    onAfterOpen: props.afterOpenModal,
    onRequestClose: props.onClose,
    style: customStyles,
    contentLabel: "Example Modal"
  }, /*#__PURE__*/React.createElement(Grid, {
    className: "main-container"
  }, /*#__PURE__*/React.createElement(Grid.Column, {
    width: 4,
    className: "full-height"
  }, /*#__PURE__*/React.createElement(Menu, {
    fluid: true,
    vertical: true,
    tabular: true,
    className: "left-menu"
  }, menuItems.map((item, index) => {
    return /*#__PURE__*/React.createElement(Menu.Item, {
      key: index,
      name: item,
      active: activeItem === item,
      onClick: handleItemClick
    });
  }))), /*#__PURE__*/React.createElement(Grid.Column, {
    stretched: true,
    width: 12,
    className: "full-height"
  }, /*#__PURE__*/React.createElement(Grid, {
    className: "full-height"
  }, /*#__PURE__*/React.createElement(Grid.Column, {
    width: 10
  }, /*#__PURE__*/React.createElement(Segment, {
    className: "canvas-container"
  }, activeItem === "Crop" ? /*#__PURE__*/React.createElement(ReactCrop, {
    src: imgURL,
    crop: crop,
    ruleOfThirds: true,
    height: 300,
    width: 300,
    onChange: newCrop => setCrop(newCrop)
  }) : /*#__PURE__*/React.createElement("canvas", {
    height: 600,
    width: 655,
    ref: canvasRef,
    id: mainCanvasId
  })), renderActions()), /*#__PURE__*/React.createElement(Grid.Column, {
    width: 6,
    className: "full-height"
  }, renderFilters()))))));
};
export default Editor;