Canvas image editor
- Load image to canvas
- Undo/Redo (With shortcut)
- Crop
- Flip
- Rotation
- Free Drawing
- Line drawing
- Shape
- Icon
- Text
- Mask Filter
- Image Filter
- API : https://nhnent.github.io/tui.image-editor/latest/
- Tutorial : https://github.com/nhnent/tui.image-editor/wiki/Tutorial
- Example : https://nhnent.github.io/tui.image-editor/latest/tutorial-example01-basic.html
- fabric.js >=1.6.7
- tui.code-snippet >=1.3.0
- IE9~11
- Edge
- Chrome
- Firefox
- Safari
- iOS 9.3.x
- Android 4.4.x
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
}
});
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
}
});
TOAST UI products are available over the CDN powered by TOAST Cloud.
You can use the CDN as below.
<script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
If you want to use a specific version, use the tag name instead of latest
in the url's path.
The CDN directory has the following structure.
tui-image-editor/
ββ latest/
β ββ tui-image-editor.js
β ββ tui-image-editor.min.js
ββ v3.1.0/
β ββ ...