TOAST UI ImageEditor

by Christopher O

HTML

<link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.0/tui-color-picker.css" rel="stylesheet">
<link type="text/css" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css" rel="stylesheet">


<div id="tui-image-editor-container"></div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.4.0/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nhnent/tui.color-picker/v2.2.0/dist/tui-color-picker.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
<!-- <script type="text/javascript" src="./js/theme/white-theme.js"></script> -->
<!-- <script type="text/javascript" src="./js/theme/black-theme.js"></script> -->

<!-- <script type="text/javascript" src="https://raw.githubusercontent.com/nhnent/tui.image-editor/master/src/js/ui/theme/standard.js"></script> -->

CSS

@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
html,
body {
  height: 100%;
  margin: 0;
}

JavaScript

console.clear();
// https://github.com/nhnent/tui.image-editor

// Image editor
var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
	usageStatistics: false,
  includeUI: {
    loadImage: {
      path: 'https://raw.githubusercontent.com/nhnent/tui.image-editor/master/examples/img/sampleImage2.png',
      name: 'SampleImage'
    },
    //theme: blackTheme, // or whiteTheme
    //theme: standard,
    initMenu: 'filter',
    menuBarPosition: 'bottom'
  },
  cssMaxWidth: 700,
  cssMaxHeight: 500,
  
  // main icons
	  'menu.normalIcon.path': 'http://nhnent.github.io/tui.image-editor/latest/dist/svg/icon-d.svg',
	  'menu.activeIcon.path': 'http://nhnent.github.io/tui.image-editor/latest/dist/svg/icon-b.svg',
	  'menu.disabledIcon.path': 'http://nhnent.github.io/tui.image-editor/latest/dist/svg/icon-a.svg',
	  'menu.hoverIcon.path': 'http://nhnent.github.io/tui.image-editor/latest/dist/svg/icon-c.svg',

	  // submenu icons
	  'submenu.normalIcon.path': 'http://nhnent.github.io/tui.image-editor/latest/dist/svg/icon-d.svg',
	  'submenu.activeIcon.path': 'http://nhnent.github.io/tui.image-editor/latest/dist/svg/icon-c.svg',
});

window.onresize = function() {
  imageEditor.ui.resizeEditor();
}