logo

/repo|v3.10.0

Class

new ImageEditor(wrapper, options)imageEditor.jsline 155

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)imageEditor.jsline 1296

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)imageEditor.jsline 664

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)imageEditor.jsline 990

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)imageEditor.jsline 1070

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)imageEditor.jsline 1369

Apply filter on canvas image

PARAMETERS
NameTypeDescription

type

string

Filter type

options

Object

Options to apply filter

PROPERTIES
NameTypeDescription

maskObjId

number

masking image object id

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)imageEditor.jsline 1274

Change canvas cursor type

PARAMETERS
NameTypeDescription

cursorType

string

cursor type

EXAMPLES
imageEditor.changeCursor('crosshair');

changeIconColor(id, color)imageEditor.jsline 1312

Change icon color

PARAMETERS
NameTypeDescription

id

number

object id

color

string

Color for icon

RETURNS:
{

Promise

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

changeSelectableAll(selectable)imageEditor.jsline 558

selectable status change

PARAMETERS
NameTypeDescription

selectable

boolean

selctable status

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

changeShape(id, options, isSilent)imageEditor.jsline 1032

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)imageEditor.jsline 1085

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)imageEditor.jsline 1109

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()imageEditor.jsline 529

Clear all objects

RETURNS:
{

Promise

}
EXAMPLES
imageEditor.clearObjects();

clearRedoStack()imageEditor.jsline 1421

Clear redoStack

EXAMPLES
imageEditor.clearRedoStack();

clearUndoStack()imageEditor.jsline 1412

Clear undoStack

EXAMPLES
imageEditor.clearUndoStack();

crop(rect)imageEditor.jsline 720

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()imageEditor.jsline 538

Deactivate all objects

EXAMPLES
imageEditor.deactivateAll();

destroy()imageEditor.jsline 1459

Destroy

discardSelection()imageEditor.jsline 548

discard selction

EXAMPLES
imageEditor.discardSelection();

flipX()imageEditor.jsline 768

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()imageEditor.jsline 784

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()imageEditor.jsline 1564

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()imageEditor.jsline 733

Get the cropping rect

RETURNS:
{

Object

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

getDrawingMode()imageEditor.jsline 519

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()imageEditor.jsline 1403

Get image name

RETURNS:
{

string

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

getObjectPosition(id, originX, originY)imageEditor.jsline 1578

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)imageEditor.jsline 1547

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)imageEditor.jsline 1332

Whether it has the filter or not

PARAMETERS
NameTypeDescription

type

string

Filter type

RETURNS:
{

boolean

} - true if it has the filter

isEmptyRedoStack()imageEditor.jsline 1439

Whehter the redo stack is empty or not

RETURNS:
{

boolean

} - imageEditor.isEmptyRedoStack();

isEmptyUndoStack()imageEditor.jsline 1430

Whehter the undo stack is empty or not

RETURNS:
{

boolean

} - imageEditor.isEmptyUndoStack();

loadImageFromFile(imgFile, imageName)imageEditor.jsline 621

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)imageEditor.jsline 647

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()imageEditor.jsline 606

Redo

RETURNS:
{

Promise

}
EXAMPLES
imageEditor.redo();

registerIcons(infos)imageEditor.jsline 1264

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()imageEditor.jsline 379

Remove Active Object

removeFilter(type)imageEditor.jsline 1348

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)imageEditor.jsline 1323

Remove an object or group by id

PARAMETERS
NameTypeDescription

id

number

object id

RETURNS:
{

Promise

}
EXAMPLES
imageEditor.removeObject(id);

resetFlip()imageEditor.jsline 800

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

resizeCanvasDimension(dimension)imageEditor.jsline 1448

Resize canvas dimension

PARAMETERS
NameTypeDescription

dimension

Object

Max width & height

RETURNS:
{

Promise

}

rotate(angle, isSilent)imageEditor.jsline 839

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
imageEidtor.rotate(5); // angle = 5
imageEidtor.rotate(-95); // angle = -90
imageEditor.rotate(10).then(status => {
    console.log('angle: ', status.angle);
})).catch(message => {
    console.log('error: ', message);
});

setAngle(angle, isSilent)imageEditor.jsline 860

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
imageEidtor.setAngle(5); // angle = 5
imageEidtor.rotate(50); // angle = 55
imageEidtor.setAngle(-40); // angle = -40
imageEditor.setAngle(10).then(status => {
    console.log('angle: ', status.angle);
})).catch(message => {
    console.log('error: ', message);
});

setBrush(option)imageEditor.jsline 880

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)imageEditor.jsline 741

Set the cropping rect

PARAMETERS
NameTypeDescription

mode

[ number ]

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

setDrawingShape(type, options)imageEditor.jsline 933

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)imageEditor.jsline 1627

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)imageEditor.jsline 1505

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)imageEditor.jsline 1522

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)imageEditor.jsline 696

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()imageEditor.jsline 705

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

EXAMPLES
imageEditor.stopDrawingMode();

toDataURL(options)imageEditor.jsline 1393

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()imageEditor.jsline 596

Undo

RETURNS:
{

Promise

}
EXAMPLES
imageEditor.undo();

Events

deprecatedaddObjectAfterimageEditor.jsline 1235

The event when object added (deprecated)

addTextimageEditor.jsline 1195

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

mousedownimageEditor.jsline 413

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

objectActivatedimageEditor.jsline 443

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

objectAddedimageEditor.jsline 1227

The event when object added

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

objectMovedimageEditor.jsline 462

The event when object is moved

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

objectRotatedimageEditor.jsline 500

The event when object angle is changed

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

objectScaledimageEditor.jsline 481

The event when scale factor is changed

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

redoStackChangedimageEditor.jsline 296

Redo stack changed event

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

textEditingimageEditor.jsline 1170

The event which starts to edit text object

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

undoStackChangedimageEditor.jsline 286

Undo stack changed event

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