Powerful Canvas-Based Image Editor – tui.image-editor

tui.image-editor is a powerful, customizable, themeable, mobile-friendly image editor (with image filters) powered by JavaScript and HTML5 canvas.

Based on the fabric.js canvas library.

Operations supported:

• Crop
• Flip
• Rotation
• Drawing
• Shape
• Icon
• Text
• Mask Filter
• Image Filter
• Download
• Image Load
• Undo
• Redo
• Reset
• Delete Object
• Zoom in
• Zoom out
• Move

Image Filters included:

• Grayscale
• Invert
• Sepia
• Blur Sharpen
• Emboss
• RemoveWhite
• GradientTransparency
• Brightness
• Noise
• Pixelate
• ColorFilter
• Tint
• Multiply
• Blend

How to use it:

Install the tui.image-editor with NPM.

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

Or include the necessary 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 element for the image editor.

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

Initialize the image editor.

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

Customization options for the image editor.

• includeUI: Use the provided UI
• includeUI.loadImage: Basic editing image
• includeUI.loadImage.path: image path
• includeUI.loadImage.name: image name
• includeUI.theme: Theme object
• includeUI.menu: It can be selected when only specific menu is used. [default all]
• includeUI.initMenu: The first menu to be selected and started.
• includeUI.menuBarPosition: Menu bar position [top | bottom | left | right]
• cssMaxWidth: Canvas css-max-width
• cssMaxHeight: Canvas css-max-height
• usageStatistics: Let us know the hostname. If you don’t want to send the hostname, please set to false.

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
    }
});

Changelog:

05/25/2022

• Updated featured image

v3.15.2 (10/20/2021)

• tui-code-snippet is included in the tui-code-snippet package.

v3.15.0 (07/28/2021)

• Update

v3.14.3 (04/08/2021)

• Fixed: removes the object when editing hex inputs of the color picker
• Fixed: not uncheck filter’s checkbox when reset image

v3.14.2 (03/25/2021)

• Fixed: unable to press space key in the text box outside the image-editor
• Fixed: not work space key when vue image-editor component loaded

v3.14.1 (03/18/2021)

• Fixed: Text control exits when space key pressed

v3.14.0 (03/08/2021)

• add zoom&pan features

v3.13.0 (03/05/2021)

• Update

v3.12.0 (02/22/2021)

• Bugfix

v3.11.0 (12/09/2020)

• add undo stack of object resize/move
• update fabric.js
• add icon drawing mode
• Enhancement
• bug-fix