React Media Editor

React components library to edit Images and Video using canvas.

Description

Use this library to add image/video editor to you React application.

This library contains drawing tools which you can use to draw graphical shapes on your image sources. Package contains ImageEditor component.

Installation

NPM package:

yarn i react-media-editor

Also you can modify project files directly, project built using RollupJS module bundler.

Example

To run example:

• go to /example folder
• yarn i
• yarn start
• open localhost:3000

Usage

Example using ImageEditor:

import React from 'react'
import Loader from "../LocalLoader/Loader";
import { ImageEditor } from '@denisko28/react-media-editor'
import Tools from '@denisko28/react-media-editor/src/painter/entities/Tools'

const Image = () => (
  <div className="page-wrapper editor">
    <div className="container">
      <ImageEditor 
        imgSrc={ExampleImage} 
        onSave={(e) => {console.log(e)}} 
        height={400}
        loader={<Loader/>}
      >
      {
        ({ undo, clear, save, setActiveTool, setActiveColor, setBrushSize }) => (
          <div>
            <button onClick={() => setActiveTool(Tools.Line)}>Line</button>
            <button onClick={() => setActiveTool(Tools.Arrow)}>Arrow</button>
            <button onClick={() => setActiveTool(Tools.Elipse)}>Elipse</button>
            <button onClick={() => setActiveTool(Tools.Rectangle)}>Rectangle</button>
            <button onClick={() => clear()}>Clear</button>
            <button onClick={() => undo()}>Undo</button>
            <button onClick={() => save()}>Save</button>
            <button onClick={() => setActiveColor("green")}>Set green brush</button>
            <button onClick={() => setBrushSize(30)}>Set brush size to 50</button>
          </div>
        )
      }
      </ImageEditor>
    </div>
  </div>
)

export default Image

Result: Imgur

Main Technologies and libraries

• React
• react-color
• Rollup.JS
• Webpack 4
• ESLint
• Prettier
• Babel

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Original Author

Vlad Morzhanov

Extension Author

Denys Kharitesku

License

(The MIT License)

Copyright (c) 2018 Vlad Morzhanov. You can review license in the LICENSE file.