feat: 이미지에디터 진행

src/main/java/kr/xit/framework/biz/cmm/model/CmmFileDTO.java

@@ -106,6 +106,8 @@ public class CmmFileDTO {
 
         private String register;
         private String registDt;
+
+        private String downloadUrl;
     }
 
     @Getter

src/main/java/kr/xit/framework/biz/cmm/web/CmmFileMgtController.java

@@ -17,7 +17,6 @@ import org.springframework.beans.factory.annotation.Value;
 import org.springframework.http.HttpHeaders;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.Mapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
@@ -45,6 +44,22 @@ public class CmmFileMgtController {
     private String uploadRoot;
     private final ICmmFileService cmmFileService;
 
+    @RequestMapping("/cmmImageViewPopup")
+    public ModelAndView cmmImageViewPopup(final CmmFileDTO.FileDtl dto) {
+        ModelAndView mav = new ModelAndView(FrameworkConstants.FRAMEWORK_JSP_BASE_PATH + "cmm/file/cmmImageViewPopup.popup");
+        mav.addObject("fileDtlDTO", dto);
+        // mav.addObject("downloadUrl", downloadUrl);
+        return mav;
+    }
+
+    @RequestMapping("/cmmPaintwebImageEditorPopup")
+    public ModelAndView cmmPaintwebImageEditorPopup(final String imageTagId) {
+        ModelAndView mav = new ModelAndView(FrameworkConstants.FRAMEWORK_JSP_BASE_PATH + "cmm/file/cmmPaintwebImageEditorPopup.popup");
+        mav.addObject("imageTagId", imageTagId);
+        // mav.addObject("downloadUrl", downloadUrl);
+        return mav;
+    }
+
     @GetMapping("/{fileMstId}")
     public ModelAndView findFiles(@PathVariable("fileMstId") final String fileMstId) {
         if(Checks.isEmpty(fileMstId)) throw BizRuntimeException.create(MessageKey.CUSTOM_MSG, "대상 파일[fileMstId]을 선택해 주세요.");
@@ -130,17 +145,22 @@ public class CmmFileMgtController {
             //throw new CustomBaseException(ErrorCode.FILE_NOT_FOUND);
         }
 
-        response.setContentType(contentType);
         response.setHeader(HttpHeaders.CONTENT_TYPE, contentType);
         response.setHeader(HttpHeaders.ACCESS_CONTROL_ALLOW_CREDENTIALS, "true");
+        response.setHeader("Pragma", "no-cache");
+        response.setHeader(HttpHeaders.CACHE_CONTROL, "no-cache, must-revalidate");
+        response.setDateHeader(HttpHeaders.EXPIRES, 0);
         try {
             response.setHeader(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + URLEncoder.encode(fileName,
                 String.valueOf(StandardCharsets.UTF_8)) + "\";");
         } catch (UnsupportedEncodingException e) {
             throw BizRuntimeException.create(MessageKey.CUSTOM_MSG, e.getMessage());
         }
-        //response.setHeader(HttpHeaders.CONTENT_ENCODING, "binary");
         response.setHeader(HttpHeaders.CONTENT_LENGTH, String.valueOf(fileSize));
+        response.setContentType(contentType);
+
+        //response.setHeader(HttpHeaders.CONTENT_ENCODING, "binary");
+
         try {
             response.getOutputStream().write(fileByte);
             response.getOutputStream().flush();

src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtForm.jsp

@@ -57,6 +57,7 @@
 	/**************************************************************************
 	 * Global Variable
 	 **************************************************************************/
+	var popup;
 	let GRID = null;
 	var callbackSearch = () => fnBiz.search();
 
@@ -87,7 +88,7 @@
 				default:
 					break;
 			}
-			CmmPopup.open(url, params, popOption, popTitle);
+			popup = CmmPopup.open(url, params, popOption, popTitle);
 			//var w = window.open("/imageEditor.do", "", "width=800,height=650,top=0px,left=200px,status=,resizable=false,scrollbars=no");
 		}
 		,onClickGrid: function(props){

src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp

@@ -241,6 +241,7 @@
 	 * Global Variable
 	 **************************************************************************/
 //	let orgData;
+	var imageEditorPopup = (flag, params) => fnBiz.pagePopup(flag, params);
 
 
 	/* *******************************
@@ -256,8 +257,8 @@
 				,url: '<c:url value="/fims/biz/ec/findNatlNewspaperAttchFiles.do"/>'
 				,data: {interfaceSeqN: '${reqDTO.interfaceSeqN}'}
 				,success: (res) => {
-					console.log('~~~');
+					// 이미지 클릭시 image editor open
-					imgDownload(res.data?.contents, '#ctznImg', '${reqDTO.ctznSttemntDetailSn}');
+					imgDownload(res.data?.contents, '#ctznImg', '${reqDTO.ctznSttemntDetailSn}', true);
 				}
 			})
 		}
@@ -267,14 +268,19 @@
 			let popOption;
 			switch (flag) {
 				case "imageEditor":
-					url = '<c:url value="/imageEditor.do"/>';
+					url = '<c:url value="/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.do"/>';
 					popOption = {width: 1000, height: 800, resizable:false,scrollbars:'no'};
 					popTitle = "이미지 에디터";
 					break;
+				case "imageView":
+					url = '<c:url value="/framework/biz/cmm/file/cmmImageViewPopup.do"/>';
+					popOption = {width: 1000, height: 800, resizable:false,scrollbars:'no'};
+					popTitle = "이미지 보기";
+					break;
 				default:
 					break;
 			}
-			CmmPopup.open(url, params, popOption, popTitle);
+			window.opener.popup = CmmPopup.open(url, params, popOption, popTitle);
 			//var w = window.open("/imageEditor.do", "", "width=800,height=650,top=0px,left=200px,status=,resizable=false,scrollbars=no");
 		}
 		,viewImg: () => {

src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecNatlNewspaperPopup.jsp

@@ -213,6 +213,7 @@
 </div>
 	<!-- //popup -->
 
+<script type="text/javascript" src="${pageContext.request.contextPath}/resources/framework/js/cmm/cmmDownloadImg.js" defer></script>
 <script type="text/javascript">
 	/**************************************************************************
 	 * Global Variable
@@ -234,6 +235,22 @@
 					imgDownload(res.data?.contents, '#ctznImg');
 				}
 			})
+		}
+		,pagePopup: function(flag, params) {
+			let url;
+			let popTitle;
+			let popOption;
+			switch (flag) {
+				case "imageView":
+					url = '<c:url value="/framework/biz/cmm/file/cmmImageViewPopup.do"/>';
+					popOption = {width: 1000, height: 800, resizable:false,scrollbars:'no'};
+					popTitle = "이미지 보기";
+					break;
+				default:
+					break;
+			}
+			window.opener.popup = CmmPopup.open(url, params, popOption, popTitle);
+			//var w = window.open("/imageEditor.do", "", "width=800,height=650,top=0px,left=200px,status=,resizable=false,scrollbars=no");
 		},
 		viewImg: () => {
 

src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmImageViewPopup.jsp

@@ -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>
+

src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp

@@ -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>

src/main/webapp/WEB-INF/jsp/imageEditor.jsp

@@ -23,24 +23,24 @@ var srcImg = null, img1 =null;
 (function () {
 	srcImg = window.opener.document.getElementById("uploadImage");
 
-	// img1 = document.getElementById('editableImage');
+	img1 = document.getElementById('editableImage');
-    // alert(srcImg.src)
+    alert(srcImg.src)
-    // console.log(srcImg)
+    console.log(srcImg)
-	// img1.src = srcImg.src;
+	img1.src = srcImg.src;
-	// img1.onload = function () {
+	img1.onload = function () {
-	// 	initEditor();
-	// 	img1.style.display = 'none';
-	// }
-
-    // img1 = document.getElementById('editableImage');
-    // alert(srcImg.src)
-    // console.log(srcImg)
-    // img1.src = srcImg.src;
-    srcImg.onload = function () {
 		initEditor();
-        srcImg.style.display = 'none';
+		img1.style.display = 'none';
 	}
 
+    // // img1 = document.getElementById('editableImage');
+    // // alert(srcImg.src)
+    // // console.log(srcImg)
+    // // img1.src = srcImg.src;
+    // srcImg.onload = function () {
+    //     initEditor();
+    //     srcImg.style.display = 'none';
+    // }
+
 })();
 
 function initEditor() {
@@ -48,8 +48,8 @@ function initEditor() {
 	pw = new PaintWeb();
 	pw.config.guiPlaceholder = target;
 	pw.config.configFile     = 'paintweb-config.json';
-	//pw.config.imageLoad 	 = img1;
+	pw.config.imageLoad 	 = img1;
-	pw.config.imageLoad 	 = srcImg;
+	//pw.config.imageLoad 	 = srcImg;
 
 	pw.config.imageSaveURL   = "/saveImage.do"; // imageSave == image upload
 	pw.config.imageDownloadURL = "/fileDownload.do";

src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js

@@ -1,13 +1,54 @@
 /* Download an img */
+
+/**
+ * <pre>
+ * 첨부파일 정보 목록으로 부터 이미지 download
+ * 이미지 url 사용
+ * @param {object} cmmFileDtls
+ * @param {string} appendElementId - '#ctznImg'
+ * @param {string} dtlSeq - 시민신고상세순번
+ * </pre>
+ */
+function imgDownload(cmmFileDtls, appendElementId, dtlSeq, isEditor) {
+    const downloadUrl = '/framework/biz/cmm/file/download.do';
+    cmmFileDtls.forEach((dtl, idx) => {
+
+        const params = "?" + $.param(dtl);
+        const title = dtlSeq ? dtl.orginlFileNm+'['+dtlSeq+']' : dtl.orginlFileNm;
+        const x = document.createElement("img");
+        x.setAttribute("src", downloadUrl+params);
+        x.setAttribute("id", dtl.fileId);
+        //x.style = 'width:150px; display: block;';
+        x.style = 'height:300px;';
+        //x.setAttribute("width", "304");
+        //x.setAttribute("height", "228");
+        x.setAttribute("title", title);
+        x.setAttribute("alt", dtl.orginlFileNm);
+        //x.setAttribute("id", dtl.fileMastrId);
+        x.setAttribute("name", dtl.orginlFileNm);
+        x.setAttribute("ctznSttemntDetailSn", dtlSeq);
+        x.addEventListener('click', (e)=>{
+            if(isEditor) {
+                fnBiz.pagePopup('imageEditor', {imageTagId: dtl.fileId});
+            }else{
+                dtl.downloadUrl = downloadUrl+params;
+                fnBiz.pagePopup('imageView', dtl);
+            }
+        })
+        document.querySelector(appendElementId).appendChild(x);
+    })
+}
+
 /**
  * <pre>
  * 첨부파일 정보 목록으로 부터 이미지 download
+ * binary 사용시
  * @param {object} cmmFileDtls
  * @param {string} appendElementId - '#ctznImg'
  * @param {string} dtlSeq - 시민신고상세순번
  * </pre>
  */
-function imgDownload(cmmFileDtls, appendElementId, dtlSeq) {
+function imgDownload2(cmmFileDtls, appendElementId, dtlSeq) {
     const downloadUrl = '/framework/biz/cmm/file/download.do';
     cmmFileDtls.forEach((dtl, idx) => {
 
@@ -35,14 +76,11 @@ function imgDownload(cmmFileDtls, appendElementId, dtlSeq) {
             x.setAttribute("name", dtl.orginlFileNm);
             x.setAttribute("ctznSttemntDetailSn", dtlSeq);
             x.addEventListener('click', (e)=>{
-console.log('~~~~~~~',e);
-console.log('~~~~~~~',e.target);
                 $('#uploadImage').attr("src", url);
                 $('#imageEditor').css('display', 'inline-block');
                 fnBiz.pagePopup('imageEditor');
             })
             document.querySelector(appendElementId).appendChild(x);
-            document.querySelector(appendElementId).appendChild(x);
 
             // Revoke Blob URL after DOM updates..
             //window.URL.revokeObjectURL(objectURL);
@@ -51,7 +89,6 @@ console.log('~~~~~~~',e.target);
 }
 
 
-
 function fn_uploadImage() {
     $("#uploadImageFile").click();
 }