logo

/repo|v3.15.2

Class

new ImageEditor(wrapper, options)

Image editor

PARAMETERS
NameTypeDescription

wrapper

stringHTMLElement

Wrapper's element or selector

options

[ Object ]

Canvas max width & height of css

PROPERTIES
NameTypeDescription

includeUI

[ number ]

Use the provided UI

PROPERTIES
NameTypeDescription

loadImage

[ Object ]

Basic editing image

PROPERTIES
NameTypeDescription

path

string

image path

name

string

image name

theme

[ Object ]

Theme object

menu

[ Array ]

It can be selected when only specific menu is used, Default values are ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'].

initMenu

[ string ]

The first menu to be selected and started.

uiSize

[ Object ]

ui size of editor

PROPERTIES
NameTypeDescription

width

string

width of ui

height

string

height of ui

menuBarPosition

string = bottom

Menu bar position('top', 'bottom', 'left', 'right')

cssMaxWidth

number

Canvas css-max-width

cssMaxHeight

number

Canvas css-max-height

selectionStyle

[ Object ]

selection style

PROPERTIES
NameTypeDescription

cornerStyle

[ string ]

selection corner style

cornerSize

[ number ]

selection corner size

cornerColor

[ string ]

selection corner color

cornerStrokeColor

[ string ]

= selection corner stroke color

transparentCorners

[ boolean ]

selection corner transparent

lineWidth

[ number ]

selection line width

borderColor

[ string ]

selection border color

rotatingPointOffset

[ number ]

selection rotating point length

usageStatistics

Boolean = true

Let us know the hostname. If you don't want to send the hostname, please set to false.

EXAMPLES
var ImageEditor = require('tui-image-editor');
var blackTheme = require('./js/theme/black-theme.js');
var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
  includeUI: {
    loadImage: {
      path: 'img/sampleImage.jpg',
      name: 'SampleImage'
    },
    theme: blackTheme, // or whiteTheme
    menu: ['shape', 'filter'],
    initMenu: 'filter',
    uiSize: {
        width: '1000px',
        height: '700px'
    },
    menuBarPosition: 'bottom'
  },
  cssMaxWidth: 700,
  cssMaxHeight: 500,
  selectionStyle: {
    cornerSize: 20,
    rotatingPointOffset: 70
  }
});

Instance Methods

addIcon(type, options)

Add icon on canvas

PARAMETERS
NameTypeDescription

type

string

Icon type ('arrow', 'cancel', custom icon name)

options

Object

Icon options

PROPERTIES
NameTypeDescription

fill

[ string ]

Icon foreground color

left

[ number ]

Icon x position

top

[ number ]

Icon y position

RETURNS:
{

Promise.<ObjectPropsErrorMsg>

}
EXAMPLES
imageEditor.addIcon('arrow'); // The position is center on canvas
imageEditor.addIcon('arrow', {
    left: 100,
    top: 100
}).then(objectProps => {
    console.log(objectProps.id);
});

addImageObject(imgUrl)

Add image object on canvas

PARAMETERS
NameTypeDescription

imgUrl

string

Image url to make object

RETURNS:
{

Promise.<ObjectPropsErrorMsg>

}
EXAMPLES
imageEditor.addImageObject('path/fileName.jpg').then(objectProps => {
    console.log(ojectProps.id);
});

addShape(type, options)

Add shape

PARAMETERS
NameTypeDescription

type

string

Shape type (ex: 'rect', 'circle', 'triangle')

options

Object

Shape options

PROPERTIES
NameTypeDescription

fill

[ ShapeFillOptionstring ]

ShapeFillOption or
Shape foreground color (ex: '#fff', 'transparent')

stroke

[ string ]

Shape outline color

strokeWidth

[ number ]

Shape outline width

width

[ number ]

Width value (When type option is 'rect', this options can use)

height

[ number ]

Height value (When type option is 'rect', this options can use)

rx

[ number ]

Radius x value (When type option is 'circle', this options can use)

ry

[ number ]

Radius y value (When type option is 'circle', this options can use)

left

[ number ]

Shape x position

top

[ number ]

Shape y position

isRegular

[ boolean ]

Whether resizing shape has 1:1 ratio or not

RETURNS:
{

Promise.<ObjectPropsErrorMsg>

}
EXAMPLES
imageEditor.addShape('rect', {
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 3,
    width: 100,
    height: 200,
    left: 10,
    top: 10,
    isRegular: true
});
imageEditor.addShape('circle', {
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 3,
    rx: 10,
    ry: 100,
    isRegular: false
}).then(objectProps => {
    console.log(objectProps.id);
});
imageEditor.addShape('rect', {
    fill: {
        type: 'filter',
        filter: [{blur: 0.3}, {pixelate: 20}]
    },
    stroke: 'blue',
    strokeWidth: 3,
    rx: 10,
    ry: 100,
    isRegular: false
}).then(objectProps => {
    console.log(objectProps.id);
});

addText(text, options)

Add text on image

PARAMETERS
NameTypeDescription

text

string

Initial input text

options

[ Object ]

Options for generating text

PROPERTIES
NameTypeDescription

styles

[ Object ]

Initial styles

PROPERTIES
NameTypeDescription

fill

[ string ]

Color

fontFamily

[ string ]

Font type for text

fontSize

[ number ]

Size

fontStyle

[ string ]

Type of inclination (normal / italic)

fontWeight

[ string ]

Type of thicker or thinner looking (normal / bold)

textAlign

[ string ]

Type of text align (left / center / right)

textDecoration

[ string ]

Type of line (underline / line-through / overline)

position

[ ]

Initial position

autofocus

[ boolean ]

text autofocus, default is true

RETURNS:
{

Promise

}
EXAMPLES
imageEditor.addText('init text');
imageEditor.addText('init text', {
    styles: {
        fill: '#000',
        fontSize: 20,
        fontWeight: 'bold'
    },
    position: {
        x: 10,
        y: 10
    }
}).then(objectProps => {
    console.log(objectProps.id);
});

applyFilter(type, options, isSilent)

Apply filter on canvas image

PARAMETERS
NameTypeDescription

type

string

Filter type

options

object

Options to apply filter

isSilent

boolean

is silent execution or not

RETURNS:
{

Promise.<FilterResultErrorMsg>

}
EXAMPLES
imageEditor.applyFilter('Grayscale');
imageEditor.applyFilter('mask', {maskObjId: id}).then(obj => {
    console.log('filterType: ', obj.type);
    console.log('actType: ', obj.action);
}).catch(message => {
    console.log('error: ', message);
});;

changeCursor(cursorType)

Change canvas cursor type

PARAMETERS
NameTypeDescription

cursorType

string

cursor type

EXAMPLES
imageEditor.changeCursor('crosshair');

changeIconColor(id, color)

Change icon color

PARAMETERS
NameTypeDescription

id

number

object id

color

string

Color for icon

RETURNS:
{

Promise

}
EXAMPLES
imageEditor.changeIconColor(id, '#000000');

changeSelectableAll(selectable)

selectable status change

PARAMETERS
NameTypeDescription

selectable

boolean

selectable status

EXAMPLES
imageEditor.changeSelectableAll(false); // or true

changeShape(id, options, isSilent)

Change shape

PARAMETERS
NameTypeDescription

id

number

object id

options

Object

Shape options

PROPERTIES
NameTypeDescription

fill

[ ShapeFillOptionstring ]

ShapeFillOption or
Shape foreground color (ex: '#fff', 'transparent')

stroke

[ string ]

Shape outline color

strokeWidth

[ number ]

Shape outline width

width

[ number ]

Width value (When type option is 'rect', this options can use)

height

[ number ]

Height value (When type option is 'rect', this options can use)

rx

[ number ]

Radius x value (When type option is 'circle', this options can use)

ry

[ number ]

Radius y value (When type option is 'circle', this options can use)

isRegular

[ boolean ]

Whether resizing shape has 1:1 ratio or not

isSilent

boolean

is silent execution or not

RETURNS:
{

Promise

}
EXAMPLES
// call after selecting shape object on canvas
imageEditor.changeShape(id, { // change rectagle or triangle
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 3,
    width: 100,
    height: 200
});
// call after selecting shape object on canvas
imageEditor.changeShape(id, { // change circle
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 3,
    rx: 10,
    ry: 100
});

changeText(id, text)

Change contents of selected text object on image

PARAMETERS
NameTypeDescription

id

number

object id

text

string

Changing text

RETURNS:
{

Promise.<ObjectPropsErrorMsg>

}
EXAMPLES
imageEditor.changeText(id, 'change text');

changeTextStyle(id, styleObj, isSilent)

Set style

PARAMETERS
NameTypeDescription

id

number

object id

styleObj

Object

text styles

PROPERTIES
NameTypeDescription

fill

[ string ]

Color

fontFamily

[ string ]

Font type for text

fontSize

[ number ]

Size

fontStyle

[ string ]

Type of inclination (normal / italic)

fontWeight

[ string ]

Type of thicker or thinner looking (normal / bold)

textAlign

[ string ]

Type of text align (left / center / right)

textDecoration

[ string ]

Type of line (underline / line-through / overline)

isSilent

boolean

is silent execution or not

RETURNS:
{

Promise

}
EXAMPLES
imageEditor.changeTextStyle(id, {
    fontStyle: 'italic'
});

clearObjects()

Clear all objects

RETURNS:
{

Promise

}
EXAMPLES
imageEditor.clearObjects();

clearRedoStack()

Clear redoStack

EXAMPLES
imageEditor.clearRedoStack();

clearUndoStack()

Clear undoStack

EXAMPLES
imageEditor.clearUndoStack();

crop(rect)

Crop this image with rect

PARAMETERS
NameTypeDescription

rect

Object

crop rect

PROPERTIES
NameTypeDescription

left

Number

left position

top

Number

top position

width

Number

width

height

Number

height

RETURNS:
{

Promise

}
EXAMPLES
imageEditor.crop(imageEditor.getCropzoneRect());

deactivateAll()

Deactivate all objects

EXAMPLES
imageEditor.deactivateAll();

destroy()

Destroy

discardSelection()

discard selction

EXAMPLES
imageEditor.discardSelection();

flipX()

Flip x

RETURNS:
{

Promise.<FlipStatusErrorMsg>

}
EXAMPLES
imageEditor.flipX().then((status => {
    console.log('flipX: ', status.flipX);
    console.log('flipY: ', status.flipY);
    console.log('angle: ', status.angle);
}).catch(message => {
    console.log('error: ', message);
});

flipY()

Flip y

RETURNS:
{

Promise.<FlipStatusErrorMsg>

}
EXAMPLES
imageEditor.flipY().then(status => {
    console.log('flipX: ', status.flipX);
    console.log('flipY: ', status.flipY);
    console.log('angle: ', status.angle);
}).catch(message => {
    console.log('error: ', message);
});

getCanvasSize()

Get the canvas size

RETURNS:
{

Object

} - {{width: number, height: number}} canvas size
EXAMPLES
var canvasSize = imageEditor.getCanvasSize();
console.log(canvasSize.width);
console.height(canvasSize.height);

getCropzoneRect()

Get the cropping rect

RETURNS:
{

Object

} - {{left: number, top: number, width: number, height: number}} rect

getDrawingMode()

Get current drawing mode

RETURNS:
{

string

}
EXAMPLES
// Image editor drawing mode
//
//    NORMAL: 'NORMAL'
//    CROPPER: 'CROPPER'
//    FREE_DRAWING: 'FREE_DRAWING'
//    LINE_DRAWING: 'LINE_DRAWING'
//    TEXT: 'TEXT'
//
if (imageEditor.getDrawingMode() === 'FREE_DRAWING') {
    imageEditor.stopDrawingMode();
}

getImageName()

Get image name

RETURNS:
{

string

} - image name
EXAMPLES
console.log(imageEditor.getImageName());

getObjectPosition(id, originX, originY)

Get object position by originX, originY

PARAMETERS
NameTypeDescription

id

number

object id

originX

string

can be 'left', 'center', 'right'

originY

string

can be 'top', 'center', 'bottom'

RETURNS:
{

Object

} - {{x:number, y: number}} position by origin if id is valid, or null
EXAMPLES
var position = imageEditor.getObjectPosition(id, 'left', 'top');
console.log(position);

getObjectProperties(id, keys)

Get properties of active object corresponding key

PARAMETERS
NameTypeDescription

id

number

object id

keys

Array.<string>ObjectPropsstring

property's key

RETURNS:
{

ObjectProps

} - properties if id is valid or null
EXAMPLES
var props = imageEditor.getObjectProperties(id, 'left');
console.log(props);
var props = imageEditor.getObjectProperties(id, ['left', 'top', 'width', 'height']);
console.log(props);
var props = imageEditor.getObjectProperties(id, {
    left: null,
    top: null,
    width: null,
    height: null,
    opacity: null
});
console.log(props);

hasFilter(type)

Whether it has the filter or not

PARAMETERS
NameTypeDescription

type

string

Filter type

RETURNS:
{

boolean

} - true if it has the filter

isEmptyRedoStack()

Whehter the redo stack is empty or not

RETURNS:
{

boolean

} - imageEditor.isEmptyRedoStack();

isEmptyUndoStack()

Whehter the undo stack is empty or not

RETURNS:
{

boolean

} - imageEditor.isEmptyUndoStack();

loadImageFromFile(imgFile, imageName)

Load image from file

PARAMETERS
NameTypeDescription

imgFile

File

Image file

imageName

[ string ]

imageName

RETURNS:
{

Promise.<SizeChangeErrorMsg>

}
EXAMPLES
imageEditor.loadImageFromFile(file).then(result => {
     console.log('old : ' + result.oldWidth + ', ' + result.oldHeight);
     console.log('new : ' + result.newWidth + ', ' + result.newHeight);
});

loadImageFromURL(url, imageName)

Load image from url

PARAMETERS
NameTypeDescription

url

string

File url

imageName

string

imageName

RETURNS:
{

Promise.<SizeChangeErrorMsg>

}
EXAMPLES
imageEditor.loadImageFromURL('http://url/testImage.png', 'lena').then(result => {
     console.log('old : ' + result.oldWidth + ', ' + result.oldHeight);
     console.log('new : ' + result.newWidth + ', ' + result.newHeight);
});

redo(iterationCount)

Redo

PARAMETERS
NameTypeDescription

iterationCount

number = 1

Iteration count of redo

RETURNS:
{

Promise

}
EXAMPLES
imageEditor.redo();

registerIcons(infos)

Register custom icons

PARAMETERS
NameTypeDescription

infos

Object

Infos to register icons

EXAMPLES
imageEditor.registerIcons({
    customIcon: 'M 0 0 L 20 20 L 10 10 Z',
    customArrow: 'M 60 0 L 120 60 H 90 L 75 45 V 180 H 45 V 45 L 30 60 H 0 Z'
});

removeActiveObject()

Remove Active Object

removeFilter(type)

Remove filter on canvas image

PARAMETERS
NameTypeDescription

type

string

Filter type

RETURNS:
{

Promise.<FilterResultErrorMsg>

}
EXAMPLES
imageEditor.removeFilter('Grayscale').then(obj => {
    console.log('filterType: ', obj.type);
    console.log('actType: ', obj.action);
}).catch(message => {
    console.log('error: ', message);
});

removeObject(id)

Remove an object or group by id

PARAMETERS
NameTypeDescription

id

number

object id

RETURNS:
{

Promise

}
EXAMPLES
imageEditor.removeObject(id);

resetFlip()

Reset flip

RETURNS:
{

Promise.<FlipStatusErrorMsg>

}
EXAMPLES
imageEditor.resetFlip().then(status => {
    console.log('flipX: ', status.flipX);
    console.log('flipY: ', status.flipY);
    console.log('angle: ', status.angle);
}).catch(message => {
    console.log('error: ', message);
});;

resetZoom()

Reset zoom. Change zoom level to 1.0

resize(dimensions)

PARAMETERS
NameTypeDescription

dimensions

object

Image Dimensions

RETURNS:
{

Promise.<ErrorMsg>

}

resizeCanvasDimension(dimension)

Resize canvas dimension

PARAMETERS
NameTypeDescription

dimension

Object

Max width & height

RETURNS:
{

Promise

}

rotate(angle, isSilent)

Rotate image

PARAMETERS
NameTypeDescription

angle

number

Additional angle to rotate image

isSilent

boolean

is silent execution or not

RETURNS:
{

Promise

}
EXAMPLES
imageEditor.rotate(10); // angle = 10
imageEditor.rotate(10); // angle = 20
imageEditor.rotate(5); // angle = 5
imageEditor.rotate(-95); // angle = -90
imageEditor.rotate(10).then(status => {
    console.log('angle: ', status.angle);
})).catch(message => {
    console.log('error: ', message);
});

setAngle(angle, isSilent)

Set angle

PARAMETERS
NameTypeDescription

angle

number

Angle of image

isSilent

boolean

is silent execution or not

RETURNS:
{

Promise.<RotateStatusErrorMsg>

}
EXAMPLES
imageEditor.setAngle(10); // angle = 10
imageEditor.rotate(10); // angle = 20
imageEditor.setAngle(5); // angle = 5
imageEditor.rotate(50); // angle = 55
imageEditor.setAngle(-40); // angle = -40
imageEditor.setAngle(10).then(status => {
    console.log('angle: ', status.angle);
})).catch(message => {
    console.log('error: ', message);
});

setBrush(option)

Set drawing brush

PARAMETERS
NameTypeDescription

option

Object

brush option

PROPERTIES
NameTypeDescription

width

Number

width

color

String

color like 'FFFFFF', 'rgba(0, 0, 0, 0.5)'

EXAMPLES
imageEditor.startDrawingMode('FREE_DRAWING');
imageEditor.setBrush({
    width: 12,
    color: 'rgba(0, 0, 0, 0.5)'
});
imageEditor.setBrush({
    width: 8,
    color: 'FFFFFF'
});

setCropzoneRect(mode)

Set the cropping rect

PARAMETERS
NameTypeDescription

mode

[ number ]

crop rect mode 1, 1.5, 1.3333333333333333, 1.25, 1.7777777777777777

setDrawingShape(type, options)

Set states of current drawing shape

PARAMETERS
NameTypeDescription

type

string

Shape type (ex: 'rect', 'circle', 'triangle')

options

[ Object ]

Shape options

PROPERTIES
NameTypeDescription

fill

[ ShapeFillOptionstring ]

ShapeFillOption or
Shape foreground color (ex: '#fff', 'transparent')

stoke

[ string ]

Shape outline color

strokeWidth

[ number ]

Shape outline width

width

[ number ]

Width value (When type option is 'rect', this options can use)

height

[ number ]

Height value (When type option is 'rect', this options can use)

rx

[ number ]

Radius x value (When type option is 'circle', this options can use)

ry

[ number ]

Radius y value (When type option is 'circle', this options can use)

isRegular

[ number ]

Whether resizing shape has 1:1 ratio or not

EXAMPLES
imageEditor.setDrawingShape('rect', {
    fill: 'red',
    width: 100,
    height: 200
});
imageEditor.setDrawingShape('rect', {
    fill: {
        type: 'filter',
        filter: [{blur: 0.3}, {pixelate: 20}]
    },
    width: 100,
    height: 200
});
imageEditor.setDrawingShape('circle', {
    fill: 'transparent',
    stroke: 'blue',
    strokeWidth: 3,
    rx: 10,
    ry: 100
});
imageEditor.setDrawingShape('triangle', { // When resizing, the shape keep the 1:1 ratio
    width: 1,
    height: 1,
    isRegular: true
});
imageEditor.setDrawingShape('circle', { // When resizing, the shape keep the 1:1 ratio
    rx: 10,
    ry: 10,
    isRegular: true
});

setObjectPosition(id, posInfo)

Set object position by originX, originY

PARAMETERS
NameTypeDescription

id

number

object id

posInfo

Object

position object

PROPERTIES
NameTypeDescription

x

number

x position

y

number

y position

originX

string

can be 'left', 'center', 'right'

originY

string

can be 'top', 'center', 'bottom'

RETURNS:
{

Promise

}
EXAMPLES
// align the object to 'left', 'top'
imageEditor.setObjectPosition(id, {
    x: 0,
    y: 0,
    originX: 'left',
    originY: 'top'
});
// align the object to 'right', 'top'
var canvasSize = imageEditor.getCanvasSize();
imageEditor.setObjectPosition(id, {
    x: canvasSize.width,
    y: 0,
    originX: 'right',
    originY: 'top'
});
// align the object to 'left', 'bottom'
var canvasSize = imageEditor.getCanvasSize();
imageEditor.setObjectPosition(id, {
    x: 0,
    y: canvasSize.height,
    originX: 'left',
    originY: 'bottom'
});
// align the object to 'right', 'bottom'
var canvasSize = imageEditor.getCanvasSize();
imageEditor.setObjectPosition(id, {
    x: canvasSize.width,
    y: canvasSize.height,
    originX: 'right',
    originY: 'bottom'
});

setObjectProperties(id, keyValue)

Set properties of active object

PARAMETERS
NameTypeDescription

id

number

object id

keyValue

Object

key & value

RETURNS:
{

Promise

}
EXAMPLES
imageEditor.setObjectProperties(id, {
    left:100,
    top:100,
    width: 200,
    height: 200,
    opacity: 0.5
});

setObjectPropertiesQuietly(id, keyValue)

Set properties of active object, Do not leave an invoke history.

PARAMETERS
NameTypeDescription

id

number

object id

keyValue

Object

key & value

EXAMPLES
imageEditor.setObjectPropertiesQuietly(id, {
    left:100,
    top:100,
    width: 200,
    height: 200,
    opacity: 0.5
});

startDrawingMode(mode, option)

Start a drawing mode. If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first.

PARAMETERS
NameTypeDescription

mode

String

Can be one of 'CROPPER', 'FREE_DRAWING', 'LINE_DRAWING', 'TEXT', 'SHAPE'

option

[ Object ]

parameters of drawing mode, it's available with 'FREE_DRAWING', 'LINE_DRAWING'

PROPERTIES
NameTypeDescription

width

[ Number ]

brush width

color

[ String ]

brush color

arrowType

[ Object ]

arrow decorate

PROPERTIES
NameTypeDescription

tail

[ string ]

arrow decorate for tail. 'chevron' or 'triangle'

head

[ string ]

arrow decorate for head. 'chevron' or 'triangle'

RETURNS:
{

boolean

} - true if success or false
EXAMPLES
imageEditor.startDrawingMode('FREE_DRAWING', {
     width: 10,
     color: 'rgba(255,0,0,0.5)'
});
imageEditor.startDrawingMode('LINE_DRAWING', {
     width: 10,
     color: 'rgba(255,0,0,0.5)',
     arrowType: {
         tail: 'chevron' // triangle
     }
});

stopDrawingMode()

Stop the current drawing mode and back to the 'NORMAL' mode

EXAMPLES
imageEditor.stopDrawingMode();

toDataURL(options)

Get data url

PARAMETERS
NameTypeDescription

options

Object

options for toDataURL

PROPERTIES
NameTypeDescription

format

String = png

The format of the output image. Either "jpeg" or "png"

quality

Number = 1

Quality level (0..1). Only used for jpeg.

multiplier

Number = 1

Multiplier to scale by

left

[ Number ]

Cropping left offset. Introduced in fabric v1.2.14

top

[ Number ]

Cropping top offset. Introduced in fabric v1.2.14

width

[ Number ]

Cropping width. Introduced in fabric v1.2.14

height

[ Number ]

Cropping height. Introduced in fabric v1.2.14

RETURNS:
{

string

} - A DOMString containing the requested data URI
EXAMPLES
imgEl.src = imageEditor.toDataURL();

imageEditor.loadImageFromURL(imageEditor.toDataURL(), 'FilterImage').then(() => {
     imageEditor.addImageObject(imgUrl);
});

undo(iterationCount)

Undo

PARAMETERS
NameTypeDescription

iterationCount

number = 1

Iteration count of undo

RETURNS:
{

Promise

}
EXAMPLES
imageEditor.undo();

zoom($0, x, y, zoomLevel)

Zoom

PARAMETERS
NameTypeDescription

$0

Object

PROPERTIES
NameTypeDescription

x

y

zoomLevel

x

number

x axis of center point for zoom

y

number

y axis of center point for zoom

zoomLevel

number

level of zoom(1.0 ~ 5.0)

_clearHistory()

Clear history

_initHistory()

Init history

Events

deprecatedaddObjectAfter

The event when object added (deprecated)

addText

The event when 'TEXT' drawing mode is enabled and click non-object area.

EXAMPLES
imageEditor.on('addText', function(pos) {
    console.log('text position on canvas: ' + pos.originPosition);
    console.log('text position on brwoser: ' + pos.clientPosition);
});

mousedown

The mouse down event with position x, y on canvas

EXAMPLES
imageEditor.on('mousedown', function(event, originPointer) {
    console.log(event);
    console.log(originPointer);
    if (imageEditor.hasFilter('colorFilter')) {
        imageEditor.applyFilter('colorFilter', {
            x: parseInt(originPointer.x, 10),
            y: parseInt(originPointer.y, 10)
        });
    }
});

objectActivated

The event when object is selected(aka activated).

EXAMPLES
imageEditor.on('objectActivated', function(props) {
    console.log(props);
    console.log(props.type);
    console.log(props.id);
});

objectAdded

The event when object added

EXAMPLES
imageEditor.on('objectAdded', function(props) {
    console.log(props);
});

objectMoved

The event when object is moved

EXAMPLES
imageEditor.on('objectMoved', function(props) {
    console.log(props);
    console.log(props.type);
});

objectRotated

The event when object angle is changed

EXAMPLES
imageEditor.on('objectRotated', function(props) {
    console.log(props);
    console.log(props.type);
});

objectScaled

The event when scale factor is changed

EXAMPLES
imageEditor.on('objectScaled', function(props) {
    console.log(props);
    console.log(props.type);
});

redoStackChanged

Redo stack changed event

EXAMPLES
imageEditor.on('redoStackChanged', function(length) {
    console.log(length);
});

textEditing

The event which starts to edit text object

EXAMPLES
imageEditor.on('textEditing', function() {
    console.log('text editing');
});

undoStackChanged

Undo stack changed event

EXAMPLES
imageEditor.on('undoStackChanged', function(length) {
    console.log(length);
});
Resizable