tui-image-editor.upgrade
Version:
TOAST UI Component: ImageEditor(fix bug)
50 lines (45 loc) • 2 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>0. Design</title>
<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="../dist/tui-image-editor.css" rel="stylesheet">
<style>
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
html, body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<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.3.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="../dist/tui-image-editor.upgrade.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>
// Image editor
var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
includeUI: {
loadImage: {
path: 'img/sampleImage2.png',
name: 'SampleImage'
},
theme: blackTheme, // or whiteTheme
initMenu: 'filter',
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
cssMaxHeight: 500
});
window.onresize = function() {
imageEditor.ui.resizeEditor();
}
</script>
</body>
</html>