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

Toast UI Image Editor is a full-featured image editor that uses HTML5 Canvas. It is easy to use and provides powerful filters.

tui.image-editor is a powerful, customizable, customizable, and easy-to-use image editor for mobile (with image filters) powered by JavaScript.

🎨 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

Demo

Download