303 lines
13 KiB
HTML
303 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>1. Basic</title>
|
|
<link type="text/css" href="css/tui-color-picker.css" rel="stylesheet" />
|
|
<link type="text/css" href="css/service-basic.css" rel="stylesheet" />
|
|
<script>var errorLogs=[];window.onerror=function(o,r,e,n){errorLogs.push({message:o,source:r,lineno:e,colno:n})};</script>
|
|
</head>
|
|
<body>
|
|
<div class="body-container">
|
|
<div class="tui-image-editor-controls">
|
|
<ul class="menu">
|
|
<li class="menu-item border input-wrapper">
|
|
사진불러오기
|
|
<input type="file" accept="image/*" id="input-image-file" />
|
|
</li>
|
|
<li class="menu-item border" id="btn-download">다운로드</li>
|
|
<li class="menu-item disabled" id="btn-undo">이전</li>
|
|
<li class="menu-item disabled" id="btn-redo">다음</li>
|
|
<li class="menu-item" id="btn-clear-objects">초기화</li>
|
|
<!-- <li class="menu-item" id="btn-remove-active-object">RemoveActiveObject</li> -->
|
|
<li class="menu-item" id="btn-crop">자르기</li>
|
|
<li class="menu-item" id="btn-flip">뒤집기</li>
|
|
<li class="menu-item" id="btn-rotation">돌리기</li>
|
|
<!-- <li class="menu-item" id="btn-draw-line">선그리기</li> -->
|
|
<!-- <li class="menu-item" id="btn-draw-shape">모양</li> -->
|
|
<li class="menu-item" id="btn-add-icon">아이콘</li>
|
|
<li class="menu-item" id="btn-text">텍스트</li>
|
|
</ul>
|
|
<div class="sub-menu-container" id="crop-sub-menu">
|
|
<ul class="menu">
|
|
<li class="menu-item" id="btn-apply-crop">적용</li>
|
|
<li class="menu-item" id="btn-cancel-crop">취소</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sub-menu-container" id="flip-sub-menu">
|
|
<ul class="menu">
|
|
<li class="menu-item" id="btn-flip-x">좌우반전</li>
|
|
<li class="menu-item" id="btn-flip-y">상하반전</li>
|
|
<li class="menu-item" id="btn-reset-flip">초기화</li>
|
|
<li class="menu-item close">닫기</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sub-menu-container" id="rotation-sub-menu">
|
|
<ul class="menu">
|
|
<li class="menu-item" id="btn-rotate-clockwise">시계방향(90도)</li>
|
|
<li class="menu-item" id="btn-rotate-counter-clockwise">반시계방향(-90도)</li>
|
|
<!--
|
|
<li class="menu-item no-pointer">
|
|
<label>
|
|
Range input
|
|
<input id="input-rotation-range" type="range" min="-360" value="0" max="360" />
|
|
</label>
|
|
</li>
|
|
-->
|
|
<li class="menu-item close">Close</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sub-menu-container menu" id="draw-line-sub-menu">
|
|
<ul class="menu">
|
|
<li class="menu-item">
|
|
<label>
|
|
<input type="radio" name="select-line-type" value="freeDrawing" checked="checked" />
|
|
Free drawing
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="select-line-type" value="lineDrawing" />
|
|
Straight line
|
|
</label>
|
|
</li>
|
|
<li class="menu-item">
|
|
<div id="tui-brush-color-picker">Brush color</div>
|
|
</li>
|
|
<li class="menu-item">
|
|
<label class="menu-item no-pointer">
|
|
Brush width
|
|
<input id="input-brush-width-range" type="range" min="5" max="30" value="12" />
|
|
</label>
|
|
</li>
|
|
<li class="menu-item close">Close</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sub-menu-container" id="draw-shape-sub-menu">
|
|
<ul class="menu">
|
|
<li class="menu-item">
|
|
<label>
|
|
<input type="radio" name="select-shape-type" value="rect" checked="checked" />
|
|
rect
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="select-shape-type" value="circle" />
|
|
circle
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="select-shape-type" value="triangle" />
|
|
triangle
|
|
</label>
|
|
</li>
|
|
<li class="menu-item">
|
|
<select name="select-color-type">
|
|
<option value="fill">Fill</option>
|
|
<option value="stroke">Stroke</option>
|
|
</select>
|
|
<label>
|
|
<input type="radio" name="input-check-fill" id="input-check-transparent" value="transparent" />
|
|
transparent
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="input-check-fill" id="input-check-filter" value="filter" />
|
|
filter
|
|
</label>
|
|
<div id="tui-shape-color-picker"></div>
|
|
</li>
|
|
<li class="menu-item">
|
|
<label class="menu-item no-pointer">
|
|
Stroke width
|
|
<input id="input-stroke-width-range" type="range" min="0" max="300" value="12" />
|
|
</label>
|
|
</li>
|
|
<li class="menu-item close">Close</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sub-menu-container" id="icon-sub-menu">
|
|
<ul class="menu">
|
|
<li class="menu-item">
|
|
<div id="tui-icon-color-picker">Icon color</div>
|
|
</li>
|
|
<!-- <li class="menu-item border" id="btn-register-icon">Register custom icon</li> -->
|
|
<li class="menu-item icon-text" data-icon-type="arrow">➡</li>
|
|
<li class="menu-item icon-text" data-icon-type="cancel">✖</li>
|
|
<li class="menu-item icon-text" data-icon-type="clock">clock</li>
|
|
<li class="menu-item icon-text" data-icon-type="idea">idea</li>
|
|
<li class="menu-item close">Close</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sub-menu-container" id="text-sub-menu">
|
|
<ul class="menu">
|
|
<li class="menu-item">
|
|
<div>
|
|
<button class="btn-text-style" data-style-type="b">굵게</button>
|
|
<button class="btn-text-style" data-style-type="i">기울임</button>
|
|
<button class="btn-text-style" data-style-type="u">밑줄</button>
|
|
<button class="btn-text-style" data-style-type="1">NotoSans</button>
|
|
<button class="btn-text-style" data-style-type="2">Verdana</button>
|
|
</div>
|
|
</li>
|
|
<li class="menu-item">
|
|
<label class="no-pointer">
|
|
<input id="input-font-size-range" type="range" min="10" max="500" value="30" />
|
|
</label>
|
|
</li>
|
|
<li class="menu-item">
|
|
<div id="tui-text-color-picker">텍스트 색상</div>
|
|
</li>
|
|
<li class="menu-item close">닫기</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sub-menu-container" id="filter-sub-menu">
|
|
<ul class="menu">
|
|
<li class="menu-item border input-wrapper">
|
|
Load Mask Image
|
|
<input type="file" accept="image/*" id="input-mask-image-file" />
|
|
</li>
|
|
<li class="menu-item" id="btn-apply-mask">Apply mask filter</li>
|
|
<li class="menu-item close">Close</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sub-menu-container" id="image-filter-sub-menu">
|
|
<ul class="menu">
|
|
<li class="menu-item align-left-top">
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<label><input type="checkbox" id="input-check-grayscale" />Grayscale</label>
|
|
</td>
|
|
<td>
|
|
<label><input type="checkbox" id="input-check-invert" />Invert</label>
|
|
</td>
|
|
<td>
|
|
<label><input type="checkbox" id="input-check-sepia" />Sepia</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label><input type="checkbox" id="input-check-sepia2" />Sepia2</label>
|
|
</td>
|
|
<td>
|
|
<label><input type="checkbox" id="input-check-blur" />Blur</label>
|
|
</td>
|
|
<td>
|
|
<label><input type="checkbox" id="input-check-sharpen" />Sharpen</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label><input type="checkbox" id="input-check-emboss" />Emboss</label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</li>
|
|
<li class="menu-item align-left-top">
|
|
<p>
|
|
<label>
|
|
<input type="checkbox" id="input-check-remove-white" />
|
|
RemoveWhite
|
|
</label>
|
|
<br />
|
|
<label>
|
|
Distance
|
|
<input class="range-narrow" id="input-range-remove-white-distance" type="range" min="0" value="10" max="255" />
|
|
</label>
|
|
</p>
|
|
</li>
|
|
<li class="menu-item align-left-top">
|
|
<p>
|
|
<label><input type="checkbox" id="input-check-brightness" />Brightness</label><br />
|
|
<label>
|
|
Value
|
|
<input class="range-narrow" id="input-range-brightness-value" type="range" min="-255" value="100" max="255" />
|
|
</label>
|
|
</p>
|
|
</li>
|
|
<li class="menu-item align-left-top">
|
|
<p>
|
|
<label><input type="checkbox" id="input-check-noise" />Noise</label><br />
|
|
<label>
|
|
Value
|
|
<input class="range-narrow" id="input-range-noise-value" type="range" min="0" value="100" max="1000" />
|
|
</label>
|
|
</p>
|
|
</li>
|
|
<li class="menu-item align-left-top">
|
|
<p>
|
|
<label>
|
|
<input type="checkbox" id="input-check-color-filter" />
|
|
ColorFilter
|
|
</label>
|
|
<br />
|
|
<label>
|
|
Threshold
|
|
<input class="range-narrow" id="input-range-color-filter-value" type="range" min="0" value="45" max="255" />
|
|
</label>
|
|
</p>
|
|
</li>
|
|
<li class="menu-item align-left-top">
|
|
<p>
|
|
<label><input type="checkbox" id="input-check-pixelate" />Pixelate</label><br />
|
|
<label>
|
|
Value
|
|
<input class="range-narrow" id="input-range-pixelate-value" type="range" min="2" value="4" max="20" />
|
|
</label>
|
|
</p>
|
|
</li>
|
|
<li class="menu-item align-left-top">
|
|
<p>
|
|
<label><input type="checkbox" id="input-check-tint" />Tint</label><br />
|
|
</p>
|
|
<div id="tui-tint-color-picker"></div>
|
|
<label>
|
|
Opacity
|
|
<input class="range-narrow" id="input-range-tint-opacity-value" type="range" min="0" value="1" max="1" step="0.1" />
|
|
</label>
|
|
</li>
|
|
<li class="menu-item align-left-top">
|
|
<p>
|
|
<label><input type="checkbox" id="input-check-multiply" />Multiply</label>
|
|
</p>
|
|
<div id="tui-multiply-color-picker"></div>
|
|
</li>
|
|
<li class="menu-item align-left-top">
|
|
<p>
|
|
<label><input type="checkbox" id="input-check-blend" />Blend</label>
|
|
</p>
|
|
<div id="tui-blend-color-picker"></div>
|
|
<select name="select-blend-type">
|
|
<option value="add" selected>Add</option>
|
|
<option value="diff">Diff</option>
|
|
<option value="diff">Subtract</option>
|
|
<option value="multiply">Multiply</option>
|
|
<option value="screen">Screen</option>
|
|
<option value="lighten">Lighten</option>
|
|
<option value="darken">Darken</option>
|
|
</select>
|
|
</li>
|
|
<li class="menu-item close">Close</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="tui-image-editor"></div>
|
|
</div>
|
|
<script type="text/javascript" src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v4.2.0.js"></script>
|
|
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
|
|
<script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.min.js"></script>
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
|
|
<script src="js/tui-image-editor.js"></script>
|
|
<script src="js/service-basic.js"></script>
|
|
</body>
|
|
</html>
|