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
Dependency
Test Environment
PC
- IE9~11
- Edge
- Chrome
- Firefox
- Safari
Mobile
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
}
});
Via Contents Delivery Network (CDN)
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/
│ ├─ ...
Download
License
MIT LICENSE