Image Editor
Canvas image editor
Feature
- Load image to canvas
- Undo/Redo (With shortcut)
- Crop
- Flip
- Rotation
- Free Drawing
- Line drawing
- Shape
- Icon
- Text
- Mask Filter
- Image Filter
Documentation
- API : http://nhnent.github.io/tui.image-editor/latest/
- Tutorial : https://github.com/nhnent/tui.image-editor/wiki/Tutorial
- Example : http://nhnent.github.io/tui.image-editor/latest/tutorial-example01-basic.html
Dependency
- fabric.js >=1.6.7
- tui.code-snippet >=1.2.5
Test Environment
PC
- IE9~11
- Edge
- Chrome
- Firefox
- Safari
Mobile
- iOS 9.3.x
- Android 4.4.x
Usage
Use npm
Install the latest version using npm command:
$ npm install tui-image-editor --save
or want to install the each version:
$ npm install tui-image-editor@<version> --save
To access as module format in your code:
var ImageEditor = require('tui-image-editor');
var instance = new ImageEditor('.tui-image-editor', {
cssMaxWidth: 700,
cssMaxHeight: 500,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70
}
});Use bower
Install the latest version using bower command:
$ bower install tui-image-editor
or want to install the each version:
$ bower install tui-image-editor#<tag>
To access as namespace format in your code:
var imageEditor = new tui.ImageEditor('.tui-image-editor', {
cssMaxWidth: 700,
cssMaxHeight: 500,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70
}
});