Code - chominsoo4245/mjon

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <!DOCTYPE html> <html> <head> <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 rel="stylesheet" href="/publish/css/font.css"> <link rel="stylesheet" href="/css/tui-color-picker.css" /> <link rel="stylesheet" href="/css/service-basic.css" /> <script>var errorLogs=[];window.onerror=function(o,r,e,n){errorLogs.push({message:o,source:r,lineno:e,colno:n})};</script> <script type="text/javascript"> var totalResultPhoListLength = parseInt(0); function linkPhoPage(pageNo){ $('#pageIndex').val(pageNo); var form = document.letterForm; var data = new FormData(form); $.ajax({ cache : false, url : "<c:url value='/web/mjon/msgdata/selectPhotoDataList2Ajax.do'/>", async:false, type : 'POST', data : data, dataType:'json', processData: false, contentType: false, success : function(returnData, status){ if(status == "success") { var html = ""; for(var i=0; i<returnData.resultPhoList.length; i++) { var strImgPath = returnData.resultPhoList[i].fileStreCours+"/"+returnData.resultPhoList[i].streFileNm + "." +returnData.resultPhoList[i].fileExtsn; var imgId = returnData.resultPhoList[i].attachFileId; var fileSn = returnData.resultPhoList[i].fileSn; var letterId = returnData.resultPhoList[i].letterId; html += "<li onclick='selectTemplate("+parseInt(i+totalResultPhoListLength)+",\""+ letterId + "\");'>"; html += "<img id='img"+parseInt(i+totalResultPhoListLength)+"' src='<c:url value='/cmm/fms/getImage2.do'/>?atchFileId="+imgId+"&fileSn="+fileSn+"' class='"+imgId+"'>"; html += "</li>"; } totalResultPhoListLength += returnData.resultPhoList.length; $("#scrollPaging").append(html); $('#pageIndex').val(pageNo); console.log('page:'+pageNo) }else{ alert("ERROR!");return;} }, error : function(request , status, error){ alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error); } }); } function fontSizeView(obj){ var target=$('#input-font-size-range'); var txt=$(obj).children('option:selected').val(); target.val(txt); } </script> </head> <body oncontextmenu="return false;"> <form id="letterForm" name="letterForm" method="post"> <input type="hidden" id="letterType" name="letterType" value=""/> <input type="hidden" id="memberType" name="memberType" value=""/> <input type="hidden" id="categoryCode" name="categoryCode" value=""/> <input type="hidden" id="searchKeyword" name="searchKeyword" value=""/> <input type="hidden" id="pageIndex" name="pageIndex" value="<c:out value='${letterVO.pageIndex}' default='1' /> "/> </form> <div class="ptEditer_wrap body-container">  <div class="ptEditer_header tui-image-editor-controls">  <ul class="tabType3"> <li class="tab input-wrapper"><a href="#"><i class="myPhoto"></i><span>내 사진<br>불러오기</span><input type="file" accept=".jpg" class="input-image-file" multiple /></a></li> <li class="tab active"><a href="#" onclick="TabType3(this,'2');"><i class="recomTemplate"></i><span>추천 템플릿</span></a></li> <li class="tab disable"><a href="#"><i class="sticker"></i><span>스티커</span></a></li> <li class="tab disable"><a href="#"><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" name="templateSearching" id="templateSearching" placeholder="템플릿 검색" onfocus="this.placeholder=''" onblur="this.placeholder='템플릿 검색'"> <label for="" class="label">추천 템플릿 검색</label> <button onclick="searchTemplate();"><img src="/publish/images/popup/search.png" alt="검색"></button> <label for="" class="label">추천 템플릿 선택</label> <select name="recommendTemplate" id="recommendTemplate" onchange="searchTemplate();"> <option value="">전체</option> <c:forEach var="cateList" items="${cateCodeList}" varStatus="status"> <option value="<c:out value='${cateList.cateCode}'/>"><c:out value="${cateList.cateNm}"/></option> </c:forEach> </select> </div> <div class="contWrap_scroll" id="scrollPagingWrap"> <ul class="contWrap" id="scrollPaging"></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="arrow1"><img src="/publish/images/svg/arrow1.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="arrow2"><img src="/publish/images/svg/arrow2.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="arrow9"><img src="/publish/images/svg/arrow9.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="arrow10"><img src="/publish/images/svg/arrow10.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="arrow11"><img src="/publish/images/svg/arrow11.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="arrow12"><img src="/publish/images/svg/arrow12.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="arrow13"><img src="/publish/images/svg/arrow13.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="arrow14"><img src="/publish/images/svg/arrow14.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="arrow15"><img src="/publish/images/svg/arrow15.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="arrow16"><img src="/publish/images/svg/arrow16.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="arrow17"><img src="/publish/images/svg/arrow17.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="arrow18"><img src="/publish/images/svg/arrow18.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="arrow19"><img src="/publish/images/svg/arrow19.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="arrow20"><img src="/publish/images/svg/arrow20.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="arrow21"><img src="/publish/images/svg/arrow21.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="figure1"><img src="/publish/images/svg/figure1.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="figure2"><img src="/publish/images/svg/figure2.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="figure3"><img src="/publish/images/svg/figure3.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="figure4"><img src="/publish/images/svg/figure4.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="figure5"><img src="/publish/images/svg/figure5.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="figure6"><img src="/publish/images/svg/figure6.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="figure7"><img src="/publish/images/svg/figure7.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="label1"><img src="/publish/images/svg/label1.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="label2"><img src="/publish/images/svg/label2.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="label3"><img src="/publish/images/svg/label3.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="label4"><img src="/publish/images/svg/label4.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="label5"><img src="/publish/images/svg/label5.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="label6"><img src="/publish/images/svg/label6.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="label7"><img src="/publish/images/svg/label7.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="label12"><img src="/publish/images/svg/label12.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="label13"><img src="/publish/images/svg/label13.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="label14"><img src="/publish/images/svg/label14.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc1"><img src="/publish/images/svg/etc1.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc2"><img src="/publish/images/svg/etc2.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc3"><img src="/publish/images/svg/etc3.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc4"><img src="/publish/images/svg/etc4.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc5"><img src="/publish/images/svg/etc5.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc10"><img src="/publish/images/svg/etc10.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc11"><img src="/publish/images/svg/etc11.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc7"><img src="/publish/images/svg/etc7.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc8"><img src="/publish/images/svg/etc8.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc9"><img src="/publish/images/svg/etc9.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc22"><img src="/publish/images/svg/etc22.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc23"><img src="/publish/images/svg/etc23.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc24"><img src="/publish/images/svg/etc24.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc12"><img src="/publish/images/svg/etc12.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc13"><img src="/publish/images/svg/etc13.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc14"><img src="/publish/images/svg/etc14.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc15"><img src="/publish/images/svg/etc15.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc16"><img src="/publish/images/svg/etc16.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc17"><img src="/publish/images/svg/etc17.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc18"><img src="/publish/images/svg/etc18.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc19"><img src="/publish/images/svg/etc19.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc20"><img src="/publish/images/svg/etc20.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc21"><img src="/publish/images/svg/etc21.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc25"><img src="/publish/images/svg/etc25.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc26"><img src="/publish/images/svg/etc26.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc27"><img src="/publish/images/svg/etc27.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc28"><img src="/publish/images/svg/etc28.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc29"><img src="/publish/images/svg/etc29.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc30"><img src="/publish/images/svg/etc30.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc31"><img src="/publish/images/svg/etc31.svg" alt="" /></li> <li class="menu-item icon-text" data-icon-type="etc32"><img src="/publish/images/svg/etc32.svg" alt="" /></li> </ul> </div> </div>  <div class="header_cont photoEdit_cont" id="tab3_4"> <div> <h3>텍스트</h3> <p>텍스트 입력하기를 클릭하시면<br>텍스트창이 생성됩니다.</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">Noto Sans</option> <option value="tmonMonsori">티몬 몬소리</option> <option value="cafe24Dangdanghae">Cafe24당당해</option> <option value="cafe24Ohsquare">Cafe24아네모네</option> <option value="cafe24Simplehae">Cafe24심플해</option> <option value="nanumMyeongjoEB">나눔명조 EB</option> <option value="nanumSquareEB">나눔스퀘어 EB</option> <option value="nanumBarunGothicR">나눔바른고딕R</option> <option value="nanumBarunGothicB">나눔바른고딕B</option> <option value="nanumBarunGothicL">나눔바른고딕L</option> </select> <div class="font_size_wrap"> <label for="input-font-size-range" class="label">폰트 크기 선택</label> <input type="text" id="input-font-size-range" class="font_size" autocomplete="off"> <select name="fontSize" id="font_size_list" class="font_size_list" onchange="fontSizeView(this);"> <option value="10px">10px</option> <option value="11px">11px</option> <option value="12px">12px</option> <option value="13px">13px</option> <option value="14px">14px</option> <option value="15px">15px</option> <option value="16px">16px</option> <option value="18px">18px</option> <option value="20px">20px</option> <option value="24px">24px</option> <option value="32px">32px</option> <option value="48px">48px</option> <option value="72px">72px</option> <option value="112px">112px</option> <option value="127px">127px</option> <option value="254px">254px</option> <option value="500px">500px</option> </select> <%-- <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> </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> <input type="hidden" id="input-range-brightness-value1" value="0"> <input type="hidden" id="input-range-brightness-value2" value="0"> <input type="hidden" id="input-range-brightness-value3" value="0"> <ul class="editContWrap2"> <li id="btn-rotate-counter-clockwise"><a href="#"><i></i><span>왼쪽<br>회전</span></a></li> <li id="btn-rotate-clockwise"><a href="#"><i></i><span>오른쪽<br>회전</span></a></li> <li id="btn-flip-x"><a href="#"><i></i><span>좌우<br>반전</span></a></li> <li id="btn-flip-y"><a href="#"><i></i><span>상하<br>반전</span></a></li> <li id="input-check-brightness-dark"><a href="#"><i></i><span>어둡게</span></a></li> <li id="input-check-brightness-light"><a href="#"><i></i><span>밝게</span></a></li> <li id="input-check-grayscale" value="1"><a href="#"><i></i><span>흑백</span></a></li> <li id="input-check-invert" value="1"><a href="#"><i></i><span>음영</span></a></li> </ul> </div> </div> </div>  <div class="ptEditer_body clearfix"> <div class="image_preview"> <div class="preview drag_img input-wrapper on" id="preview1" onclick="canvasTab(1)"> <div class="preview_img_wrap no_img preview1"> <div class="img_number"><span></span></div> <img src="" alt="" style="display:none;"> <button type="button" class="img_close" title="이미지 삭제 버튼" onclick="deleteImage(1);" style="display:none;"><i></i></button> <button type="button" class="img_add" title="이미지 추가 버튼" onclick="$('#input-file1').click();"><i></i></button> <input type="file" accept=".jpg" class="input-image-file" multiple id="input-file1" style="width:0px !important;height:0px !important"/> </div> </div> <div class="preview drag_img input-wrapper" id="preview2" onclick="canvasTab(2)"> <div class="preview_img_wrap no_img preview2"> <div class="img_number"><span></span></div> <img src="" alt="" style="display:none;"> <button type="button" class="img_close" title="이미지 삭제 버튼" onclick="deleteImage(2);" style="display:none;"><i></i></button> <button type="button" class="img_add" title="이미지 추가 버튼" onclick="$('#input-file2').click();"><i></i></button> <input type="file" accept=".jpg" class="input-image-file" multiple id="input-file2" style="width:0px !important;height:0px !important"/> </div> </div> <div class="preview drag_img input-wrapper" id="preview3" onclick="canvasTab(3)"> <div class="preview_img_wrap no_img preview3"> <div class="img_number"><span></span></div> <img src="" alt="" style="display:none;"> <button type="button" class="img_close" title="이미지 삭제 버튼" onclick="deleteImage(3);" style="display:none;"><i></i></button> <button type="button" class="img_add" title="이미지 추가 버튼" onclick="$('#input-file3').click();"><i></i></button> <input type="file" accept=".jpg" class="input-image-file" multiple id="input-file3" style="width:0px !important;height:0px !important"/> </div> </div> </div> <p class="req_text">+ 버튼클릭 또는,<br>파일 끌어오기로<br>첨부 가능합니다.</p> <div class="edit_area"> <div class="edit_area_wrap"> <div class="tui-image-editor" id="tui-image-editor1"></div> <div class="tui-image-editor" id="tui-image-editor2" style="display:none;"></div> <div class="tui-image-editor" id="tui-image-editor3" style="display:none;"></div> <span class="imageSize" id="imageSize1" style="display:none;"></span> <span class="imageSize" id="imageSize2" style="display:none;"></span> <span class="imageSize" id="imageSize3" style="display:none;"></span> </div> </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-reset"><i class="footer_replay"></i>초기화</button> </div> <div class="footer_right"> <button type="button" onclick="canvasToImg()">제작완료</button> <button type="button" onclick="window.close();"><i class="footer_close"></i>닫기</button> </div> </div> </div> <script src="/js/jquery.min.js"></script> <script src="/js/tui-code-snippet.min.js"></script> <script src="/js/FileSaver.min.js"></script> <script src="/js/fabric.min.js"></script> <script src="/js/tui-image-editor.js"></script> <script src="/js/tui-color-picker.min.js"></script> <script src="https://cdn.polyfill.io/v2/polyfill.min.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 src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script> $(document).ready(function(){ linkPhoPage(1); }); function searchTemplate() { $("#scrollPaging").html(""); $("#searchKeyword").val($("#templateSearching").val()); $("#categoryCode").val($("#recommendTemplate option:selected").val()); linkPhoPage(1); } function canvasToImg() { //제작완료 시 크롭모드일 때, 적용 버튼 눌러주기 if(activeCropEnter == true) { activeCropEnter = false; $btnApplyCrop.trigger("click"); } //초록 점 제거 imageEditor1.deactivateAll(); imageEditor2.deactivateAll(); imageEditor3.deactivateAll(); var openerImgCnt = $(opener.document).find("#imgCnt").val(); //부모창의 이미지 갯수 var imgCount = $('.preview_img_wrap').not('.no_img').length; // 이미지에디터에서 업로드 할 이미지 갯수 //부모창의 이미지 + 에디터에서 넘기는 이미지 갯수 if((imgCount + Number(openerImgCnt)) > 3) { alert("메시지에 첨부할 수 있는 이미지는 최대 3장입니다."); return; } setTimeout(function() { $('.preview_img_wrap').each(function(idx, el) { if( !$(el).hasClass('no_img') ) { var imageName = window['imageEditor'+(idx+1)].getImageName(); var pId = $(el).parent().attr('id').replace('preview', ''); // preview[번호] 아이디에서 번호만 추출 var canvas = $("#tui-image-editor"+ pId +" > div > .lower-canvas"); //작업된 이미지의 캔버스 var imgSrc = canvas.get(0).toDataURL("image/jpeg"); //img src 에 들어갈 데이터로 추출 var imgId = $('.preview'+(idx+1)).find("img").attr("class"); opener.imageControl($('<img src="' + imgSrc + '" />'), "edit_y", imageName, imgId); //object로 만들어 함수 호출 } }); self.close(); }, 500); } </script> </body> </html>