@jinwoo-kim-nhn jinwoo-kim-nhn released this Oct 23, 2018 · 4 commits to master since this release

Assets 2


  • Fixed a bug where the image load button function does not work properly when the default image is not registered.


  • Improved ga hostname collection method. (From tui-code-snippet version v1.4.0)

@jinwoo-kim-nhn jinwoo-kim-nhn released this Oct 4, 2018 · 10 commits to master since this release

Assets 2


  • Improved the design details of the includeUI.
    • Changed the fine spacing and color of icons, checkboxes, and text in menu and submenu.


  • Fixed JavaScript error after adding custom icon.
  • Fixed a bug where the backspace key does not work when editing text elements.

@jinwoo-kim-nhn jinwoo-kim-nhn released this Jul 12, 2018 · 28 commits to master since this release

Assets 2


  • Added includeUI option
    • includeUI option - The default UI provided by the image editor is now available.
      • includeUI.loadImage - Can specify a default target image.
      • includeUI.menu - Of the nine editing functions, only the desired functions can be included in the UI.
      • includeUI.initMenu - Can specify the menu to be used when starting up.
      • includeUI.menuBarPosition - Can set the menu bar position of the UI.
      • includeUI.theme - Can apply or customize the default theme included in the example.
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: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],
         initMenu: 'filter',
         menuBarPosition: 'bottom'
  • Added Theme
    • Provides white and black theme with basic design.
    • Themes can be created and modified for customization.
properties description
'common.bi.image' Brand icon image
'common.bisize.width' Icon image width
'common.bisize.height' Icon Image Height
'common.backgroundImage' Background image
'common.backgroundColor' Background color
'common.border' Full area border style
'header.backgroundImage' header area background
'header.backgroundColor' header area background color
'header.border' header area border style
'loadButton.backgroundColor' load button background color
'loadButton.border' load button border style
'loadButton.color' load button foreground color
'loadButton.fontFamily' load button font type
'loadButton.fontSize' load button font size
'downloadButton.backgroundColor' download button background color
'downloadButton.border' download button border style
'downloadButton.color' download button foreground color
'downloadButton.fontFamily' download button font type
'downloadButton.fontSize' download button font size
'menu.normalIcon.path' Menu default icon svg bundle file path
'menu.normalIcon.name' Menu default icon svg bundle name
'menu.activeIcon.path' Menu active icon svg bundle file path
'menu.activeIcon.name' Menu active icon svg bundle name
'menu.iconSize.width' Menu icon Size Width
'menu.iconSize.height' Menu Icon Size Height
'submenu.backgroundColor' Sub-menu area background color
'submenu.partition.color' Submenu partition line color
'submenu.normalIcon.path' Submenu default icon svg bundle file path
'submenu.normalIcon.name' Submenu default icon svg bundle name
'submenu.activeIcon.path' Submenu active icon svg bundle file path
'submenu.activeIcon.name' Submenu active icon svg bundle name
'submenu.iconSize.width' Submenu icon Size Width
'submenu.iconSize.height' Submenu Icon Size Height
'submenu.normalLabel.color' Submenu default label color
'submenu.normalLabel.fontWeight' Sub Menu Default Label Font Thickness
'submenu.activeLabel.color' Submenu active label color
'submenu.activeLabel.fontWeight' Submenu active label Font thickness
'checkbox.border' Checkbox border style
'checkbox.backgroundColor' Checkbox background color
'range.pointer.color' range control pointer color
'range.bar.color' range control bar color
'range.subbar.color' range control subbar color
'range.value.color' range number box font color
'range.value.fontWeight' range number box font thickness
'range.value.fontSize' range number box font size
'range.value.border' range number box border style
'range.value.backgroundColor' range number box background color
'range.title.color' range title font color
'range.title.fontWeight' range title font weight
'colorpicker.button.border' colorpicker button border style
'colorpicker.title.color' colorpicker button title font color

@kyuwoo-choi kyuwoo-choi released this Apr 13, 2018 · 192 commits to master since this release

Assets 2



  • 3ceb81e Docs: change file link and edit title of examples
  • 6f1c685 Docs: update year of license
  • 7f8ce91 Docs: update link of example on README file
  • 2c37314 Docs: add install via CDN guide

@dongsik-yoo dongsik-yoo released this Sep 13, 2017 · 206 commits to master since this release

Assets 2


  • #22 update coords after changing properties with setObjectPosition, setObjectProperties.

@dongsik-yoo dongsik-yoo released this Aug 31, 2017 · 207 commits to master since this release

Assets 2


  • Use fabric.require.js module instead fabric.js
    Supports UMD

@dongsik-yoo dongsik-yoo released this Aug 30, 2017 · 208 commits to master since this release

Assets 2


  • 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

@dongsik-yoo dongsik-yoo released this May 24, 2017 · 209 commits to master since this release

Assets 2

Migration guide document for 2.0.0

Tutorials and SDK document for 2.0.0


  • 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


  • 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)


  • 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 => {
  • 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

@seonim-ryu seonim-ryu released this Jan 18, 2017 · 221 commits to master since this release

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

@seonim-ryu seonim-ryu released this Dec 2, 2016 · 245 commits to master since this release

Assets 2
  • 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