Code - chominsoo4245/mjon

<!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-crop">자르기</li> <li class="menu-item" id="btn-flip">뒤집기</li> <li class="menu-item" id="btn-rotation">돌리기</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 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 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>