Code - 2025_PROJECT/mjgo

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>포토 에디터</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="/publish/css/reset.css"> <link rel="stylesheet" href="/publish/css/jquery.mCustomScrollbar.css"> <link rel="stylesheet" href="/publish/css/common.css"> <link rel="stylesheet" href="/publish/css/button.css"> <link rel="stylesheet" href="/publish/css/content.css"> <link rel="stylesheet" href="/publish/css/popup.css"> <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="ptEditer_wrap body-container">  <div class="ptEditer_header tui-image-editor-controls">  <ul class="tabType3 menu"> <li class="tab input-wrapper"><a href="#"><i class="myPhoto"></i><span>내 사진 </span><input type="file" accept="image/*" id="input-image-file" /></a></li> <li class="tab active"><a href="#" onclick="TabType3(this,'2');"><i class="recomTemplate"></i><span>추천 템플릿</span></a></li> <li class="tab"><a href="#" onclick="TabType3(this,'3');"><i class="sticker"></i><span>스티커</span></a></li> <li class="tab"><a href="#" onclick="TabType3(this,'4');"><i class="editPhoto"></i><span>포토편집</span></a></li> </ul>  <div class="header_cont recomTem_cont current" id="tab3_2"> <h3>추천 템플릿</h3> <p>템플릿 선택 시, 기존 포토는<br>삭제되고 선택한 포토로<br>변경됩니다.</p> <div class="search_box"> <label for="" class="label">추천 템플릿 검색 입력</label> <input type="text" placeholder="템플릿 검색" onfocus="this.placeholder=''" onblur="this.placeholder='템플릿 검색'"> <label for="" class="label">추천 템플릿 검색</label> <button><img src="/publish/images/popup/search.png" alt="검색"></button> <label for="" class="label">추천 템플릿 선택</label> <select> <option>템플릿 카테고리</option> <option>템플릿 카테고리</option> <option>템플릿 카테고리</option> </select> </div> <div class="contWrap_scroll"> <ul class="contWrap"> <li><a href="#" onclick="moveCanvas(1);" ><img id="img1" src="/publish/images/popup/tem1.jpg"></a></li> <li><a href="#"><img src="/publish/images/popup/tem2.jpg"></a></li> <li><a href="#"><img src="/publish/images/popup/tem3.jpg"></a></li> <li><a href="#"><img src="/publish/images/popup/tem4.jpg"></a></li> <li><a href="#"><img src="/publish/images/popup/tem5.jpg"></a></li> <li><a href="#"><img src="/publish/images/popup/tem6.jpg"></a></li> <li><a href="#"><img src="/publish/images/popup/tem7.jpg"></a></li> <li><a href="#"><img src="/publish/images/popup/tem8.jpg"></a></li> <li><a href="#"><img src="/publish/images/popup/tem1.jpg"></a></li> <li><a href="#"><img src="/publish/images/popup/tem2.jpg"></a></li> <li><a href="#"><img src="/publish/images/popup/tem3.jpg"></a></li> <li><a href="#"><img src="/publish/images/popup/tem4.jpg"></a></li> <li><a href="#"><img src="/publish/images/popup/tem5.jpg"></a></li> </ul> </div> </div>  <div class="header_cont sticker_cont" id="tab3_3"> <h3>스티커</h3> <p>우측 포토위에 스티커를 붙여<br>꾸미실 수 있습니다.</p> <div class="contWrap_scroll" id="icon-sub-menu"> <ul class="contWrap menu"> <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> </ul> </div> </div>  <div class="header_cont photoEdit_cont" id="tab3_4"> <div> <h3>텍스트</h3> <p></p> <div class="search_box2"> <button type="button" id="btn-text" class="edit_btn"><i class="put_text"></i>텍스트 입력하기</button> <label for="" class="label">폰트 타입 선택</label> <select class="font_type btn-text-family" > <option value="notoSans">노토산스</option> <option value="verdana">Verdana</option> </select> <br> <label for="input-font-size-range" class="label">폰트 크기 선택</label> <input type="text" id="input-font-size-range" list="font_size_list" class="font_size"> <datalist id="font_size_list"> <option value="10px"></option> <option value="11px"></option> <option value="12px"></option> <option value="13px"></option> <option value="14px"></option> <option value="15px"></option> <option value="16px"></option> <option value="18px"></option> <option value="20px"></option> <option value="24px"></option> <option value="32px"></option> <option value="48px"></option> <option value="72px"></option> <option value="112px"></option> <option value="127px"></option> <option value="254px"></option> <option value="500px"></option> </datalist>  </div> <ul class="editContWrap text"> <li class="btn-text-style" data-style-type="b"><a href="#"><i></i><span>굵게</span></a></li> <li class="btn-text-style" data-style-type="i"><a href="#"><i></i><span>기울임</span></a></li> <li class="btn-text-style" data-style-type="u"><a href="#"><i></i><span>밑줄</span></a></li> </ul> <div class="color_palette"> <span id="tui-text-color-picker">텍스트 색상</span> </div> </div> <div> <h3>자르기</h3> <button type="button" class="menu-item edit_btn" id="btn-crop"><i class="cut_img"></i>이미지 자르기</button> <div class="set_btn" id="crop-sub-menu" style="display:none;"> <button type="button" class="set_app" id="btn-apply-crop"><i></i>적용</button> <button type="button" class="set_cancel" id="btn-cancel-crop"><i></i>취소</button> </div> </div> <div> <h3>회전</h3> <ul class="editContWrap2"> <li id="btn-rotate-counter-clockwise"><a href="#"><i></i><span class="label">반시계 방향으로 90도 회전</span></a></li> <li id="btn-rotate-clockwise"><a href="#"><i></i><span class="label">시계방향으로 90도 회전</span></a></li> <li id="btn-flip-x"><a href="#"><i></i><span class="label">좌우 반전</span></a></li> <li id="btn-flip-y"><a href="#"><i></i><span class="label">상하 반전</span></a></li> </ul> </div> </div> </div>  <div class="ptEditer_body"> <div class="tui-image-editor" id="tui-image-editor1"></div> <div class="tui-image-editor" id="tui-image-editor2"></div> <div class="tui-image-editor" id="tui-image-editor3"></div> </div>   <div class="ptEditer_footer clearfix"> <div class="footer_left"> <button type="button" class="menu-item disabled" id="btn-undo"><i class="footer_prev"></i>이전</button> <button type="button" class="menu-item disabled" id="btn-redo"><i class="footer_next"></i>다음</button> <button type="button" class="menu-item" id="btn-clear-objects"><i class="footer_replay"></i>초기화</button> </div> <div class="footer_right"> <button type="button" onclick="canvasToImg()">제작완료</button> <button type="button"><i class="footer_close"></i>닫기</button> </div> </div> </div> <div> <img id="myImage"> <span id="src"></span> <button id="edit1" onclick="tab(1)">1번사진</button> <button id="edit2" onclick="tab(2)">2번사진</button> <button id="edit3" onclick="tab(3)" >3번사진</button> </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://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-color-picker.min.js"></script> <script src="js/tui-image-editor.js"></script> <script src="js/service-basic.js"></script> <script src="/publish/js/jquery-3.5.0.js"></script> <script src="/publish/js/jquery.mCustomScrollbar.concat.min.js"></script> <script src="/publish/js/common.js"></script> <script src="/publish/js/content.js"></script> <script src="/publish/js/popup.js"></script> <script> function moveCanvas(num) { //var canvas = document.getElementsByClassName("upper-canvas"); var canvas = $(".lower-canvas"); if(canvas.get(0).getContext){ var draw = canvas.get(0).getContext("2d"); var img = new Image(); var src = $('#img'+num).attr("src"); img.src = src; img.onload = function(){ /* canvas.attr("width") = img.width; canvas.attr("height") = img.height; */ canvas.get(0).width = img.width; canvas.get(0).height = img.height; $('.tui-image-editor-canvas-container').height(img.height); $('.tui-image-editor-canvas-container').width(img.width); draw.drawImage(img, 0, 0, img.width, img.height); } } } function canvasToImg() { var myImage = document.getElementById("myImage"); var canvas = $(".lower-canvas"); myImage.src = canvas.get(0).toDataURL("image/jpg"); } function deleteValue() { $("#input-font-size-range").val(""); } </script> </body> </html>