3.0.0 - Supports NPM installation

New

• Supports installation from NPM. Click here

npm install tui-image-editor --save

• Supports module usage.

var ImageEditor = require('tui-image-editor');
var instance = new ImageEditor('.tui-image-editor', {
    cssMaxWidth: 700,
    cssMaxHeight: 500,
    selectionStyle: {
        cornerSize: 20,
        rotatingPointOffset: 70
    }
});

Breaking Changes

• Changes global namespace
  tui.component.ImageEditor ==> tui.ImageEditor

2.0.0

Migration guide document for 2.0.0

Tutorials and SDK document for 2.0.0

New

• Image filter
  • filter types
    • grayscale, invert, sepia, sepia, blur, sharpen, emboss, removeWhite, brightness, noise, gradientTransparency, pixelate, tint, multiply, blend, colorFilter
  • related APIs
    • applyFilter, removeFilter, hasFilter

Added

• Manipulate object properties and related APIs

  • setObjectProperties - Set properties(width, height, opacity)
  • getObjectProperties - Get properties(width, height, opacity)
  • setObjectPosition - Move object with origin({x:0, y: 0, originX: 'left', originY: 'top'})
  • getObjectPosition - Get object position according to origin
  • getCanvasSize - Get size of canvas({width: number, height: number})

• APIs for crop

  • getCropzoneRect()
  • crop(rect)

Changed

• New drawing mode APIs

  • startDrawingMode
  • stopDrawingMode
  • getDrawingMode

• Use object id with all drawing APIs

imageEditor.changeIconColor(id, '#FF0000');

• Changed to Promise drawing APIs

imageEditor.addShape('circle', {
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 3,
    rx: 10,
    ry: 100,
    isRegular: false
}).then(objectProps => {
    console.log(objectProps.id);
});

• Event types and parameters

{
    id: number
    type: type
    left: number,
    top: number,
    width: number,
    fill: string
    stroke: string
    strokeWidth: number
    opacity: number,

    // text object
    text: string,
    fontFamily: string,
    fontSize: number,
    fontStyle: string,
    fontWeight: string,
    textAlign: string,
    textDecoration: string
}

Name	Purpose
addText	when mousedown event occurs in 'TEXT' drawing mode
objectActivated	when user selects an object
objectMoved	when user drags an object
objectScaled	when object is being scaled
textEditing	when textbox is being edited
mousedown	just mousedown
undoStackChanged	undo change event
redoStackChanged	redo change event

Other changes and bug fixes

• Can not call APIs from within callback function
• #16 Remove object shape tool

1.4.1

• Apply ES6 with babel
• Remove jQuery dependency
• Update some config files

1.4.0

• Add Shape Feature

  • You can draw the shape(rectagle, triangle, circle) on canvas.
    • fabric.js dependency version is ~1.6.4 to use this feature.
  • Using with new APIs
    • startDrawingShapeMode
    • endDrawingShapeMode
    • setDrawingShape
    • addShape
    • changeShape

• New and changing APIs

  • isEmptyUndoStack : To check the current undo stack is empty. (new)
  • isEmptyRedoStack : To check the current redo stack is empty. (new)
  • destroy : To prevent memory leaks. (new)
  • addIcon : Added options parameter. (change)

  var options = {
      left: 10,
      top: 10
  };
  
  imageEditor.addIcon(type, options);

  • #mousedown : Bind the mousedown event on canvas and return current event object. (new)

• Etc.

  • The API and sample page is upgraded.
  • The bundle environment is changed gulp to webpack

1.3.0

• Add Feature
  • Shortcut : When pressingbackspace or delete key on canvas, the selected object is removed on canvas.
  • New API : When resizeCanvasDimension() is called with width and height value, this API set the css dimension of canvas and resize the canvas.

imageEditor.resizeCanvasDimension({width: 100, height: 200});
imageEditor.resizeCanvasDimension({width: 10});
imageEditor.resizeCanvasDimension({height: 10});

• Improve Feature
  • Text
    • When clicking the canvas and already having the selected text object, the click event is not fired. (The text object is deactivated)
    • When editing the text object, the blinking action is not shown.
    • When editing the text object, the base position of entering text is changing (center, center) to (left, top).
• Update Config
  • The bundle files are moved to dist folder.
  • The main option add on the bower file.
• Bug Fix
  • When using fabric.js v1.6.5 and calling clearObjects(), the background image is not removed anymore.

1.2.0

Updated features

• Add sample page for mobile device
• Improve Text feature for mobile version
  • Add custom event - ImageEditor#editText
  • Directly editing text on canvas

1.1.0

Updated features

• Text
• Icon
• Mask filter
• Line drawing
• Shortcut
  • undo : ctrl + z
  • redo : ctrl + y
  • crop : shift

1.0.0

Feature

• Load image to canvas
• Undo/Redo
• Crop
• Flip
• Rotation
• Free Drawing