Skip to content

v3.2.0
Compare
Choose a tag to compare
@jinwoo-kim-nhn jinwoo-kim-nhn released this 12 Jul 00:55
· 250 commits to master since this release
v3.2.0
3bbf4dc

New

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