feat: 이미지에디터 진행
parent
4d8a5029ca
commit
42d09d86ba
@ -0,0 +1,42 @@
|
||||
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ include file="/WEB-INF/jsp/framework/taglibs.jsp" %>
|
||||
|
||||
<c:set var="bizName" value="이미지 보기"/>
|
||||
|
||||
<div class="popup" style="min-width: 100px;">
|
||||
<div class="popup_inner" style="max-width: 1000px;">
|
||||
<p class="pop_title">
|
||||
<c:out value="${bizName}"/>(<c:out value="${fileDtlDTO.orginlFileNm}"/>) 이미지
|
||||
</p>
|
||||
|
||||
<div style="height: 570px; width: 900px; overflow: auto">
|
||||
<img id="uploadImage" src='<c:out value="${fileDtlDTO.downloadUrl}"/>'/>
|
||||
</div>
|
||||
|
||||
<div class="popup_btn">
|
||||
<span class="flr p_flr">
|
||||
<a href="#" class="btn blue" onclick="paintwebImageEditor()">이미지편집</a>
|
||||
<a href="#" class="btn lightgray" onclick="window.close()">닫기</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function paintwebImageEditor() {
|
||||
//window.close();
|
||||
<%--let url = '<c:url value="/imageEditor.do"/>';--%>
|
||||
<%--let popTitle = "이미지 에디터";--%>
|
||||
<%--let popOption = {width: 1000, height: 800, resizable:false,scrollbars:'no'};--%>
|
||||
<%--CmmPopup.open(url, {}, popOption, popTitle);--%>
|
||||
//window.opener.imageEditorPopup('imageEditor', JSON.stringify('<c:out value="${fileDtlDTO.downloadUrl}"/>'));
|
||||
window.opener.popup = window.opener.imageEditorPopup('imageEditor', {imageTagId: '<c:out value="${fileDtlDTO.fileId}"/>'});
|
||||
//window.close();
|
||||
}
|
||||
$(document).ready(function () {
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,55 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>PaintWeb</title>
|
||||
<script type="text/javascript" src="/resources/3rd-party/paintweb/paintweb.js"></script>
|
||||
<script type="text/javascript" src="/resources/3rd-party/paintweb/html2canvas.min.js"></script>
|
||||
<script type="text/javascript" src="/resources/3rd-party/paintweb/es6-promise.min.js"></script>
|
||||
<script type="text/javascript" src="/resources/3rd-party/paintweb/es6-promise.auto.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<img id="editableImage"/>
|
||||
|
||||
<div id="PaintWebTarget"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var srcImg = null, img1 =null;
|
||||
|
||||
(function () {
|
||||
srcImg = window.opener.document.getElementById('<c:out value="${imageTagId}"/>');
|
||||
|
||||
img1 = document.getElementById('editableImage');
|
||||
img1.src = srcImg.src;
|
||||
img1.onload = function () {
|
||||
initEditor();
|
||||
img1.style.display = 'none';
|
||||
}
|
||||
})();
|
||||
|
||||
function initEditor() {
|
||||
var target = document.getElementById('PaintWebTarget'),
|
||||
pw = new PaintWeb();
|
||||
pw.config.guiPlaceholder = target;
|
||||
pw.config.configFile = 'paintweb-config.json';
|
||||
pw.config.imageLoad = img1;
|
||||
//pw.config.imageLoad = srcImg;
|
||||
|
||||
pw.config.imageSaveURL = "/saveImage.do"; // imageSave == image upload
|
||||
pw.config.imageDownloadURL = "/fileDownload.do";
|
||||
pw.config.afterImageSave = afterImageSave;
|
||||
pw.init();
|
||||
}
|
||||
|
||||
function afterImageSave(){
|
||||
window.close();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue