227 lines
12 KiB
HTML
227 lines
12 KiB
HTML
<!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">
|
|
<!-- photo editer header -->
|
|
<div class="ptEditer_header tui-image-editor-controls">
|
|
<!-- tab button -->
|
|
<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><!--// tab button -->
|
|
<!-- tab content2 추천 템플릿 -->
|
|
<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><!--// tab content2 추천 템플릿 -->
|
|
<!-- tab content3 스티커 -->
|
|
<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><!--// tab content3 스티커 -->
|
|
<!-- tab content4 포토편집 -->
|
|
<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>
|
|
<!-- <input id="input-font-size-range" type="range" min="10" max="500" value="30" /> -->
|
|
</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><!--// tab content4 포토편집 -->
|
|
</div><!--// photo editer header -->
|
|
<!-- photo editer body -->
|
|
<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>
|
|
<!--// photo editer body -->
|
|
<!-- photo editer footer -->
|
|
<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><!--// photo editer footer -->
|
|
</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>
|