A Full-Featured Photo Editor Using Canvas | tui.image-editor

🎨 Features

• Load image to canvas
• Undo/Redo (With shortcut)
• Crop
• Flip
• Rotation
• Free drawing
• Line drawing
• Shape
• Icon
• Text
• Mask Filter
• Image Filter

How to make use of it:

Install the tui.image-editor with NPM.

# NPM
$ npm install tui.image-editor --save

Or embody the mandatory files from a CDN.

<link rel="stylesheet" href="/path/to/tui-image-editor.css">
<script src="/path/to/tui-image-editor.js"></script>

Create a container factor for the picture editor.

<div id="tui-image-editor"></div>

Initialize the picture editor.

var ImageEditor = require('tui-image-editor');
var myEditor = new ImageEditor(document.querySelector('#tui-image-editor'), {
    // optons here
});

Customization choices for the picture editor.

var myEditor = new ImageEditor(document.querySelector('#tui-image-editor'), {
    includeUI: {
      loadImage: {
        path: 'img/sampleImage.jpg',
         name: 'SampleImage'
      },
      theme: blackTheme, // or whiteTheme
      menu: ['shape', 'filter'],
      initMenu: 'filter',
      menuBarPosition: 'bottom'
    },
    cssMaxWidth: 700,
    cssMaxHeight: 500,
    selectionStyle: {
      cornerSize: 20,
      rotatingPointOffset: 70
    }
});

Powerful Canvas-Based Image Editor, Toast UI Plugin/Github

See Demo And Download