From c7f15d213406ad162cc9c87160da76f2557a8c12 Mon Sep 17 00:00:00 2001
From: minuk926 <minuk926@gmail.com>
Date: Fri, 9 Dec 2022 19:53:46 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
 =?UTF-8?q?=EC=97=90=EB=94=94=ED=84=B0=20=EC=A7=84=ED=96=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../framework/biz/cmm/model/CmmFileDTO.java   |  29 ++++
 .../biz/cmm/web/CmmFileMgtController.java     |  15 ++
 src/main/resources/logback-local.xml          |   4 +-
 .../cmm/file/cmmPaintwebImageEditorPopup.jsp  | 129 +++++++++++++++-
 .../resources/3rd-party/paintweb/paintweb.js  | 122 +++++++++++++--
 .../resources/framework/js/cmm/cmmUtil.js     | 143 +++++++++++++++++-
 6 files changed, 419 insertions(+), 23 deletions(-)

diff --git a/src/main/java/kr/xit/framework/biz/cmm/model/CmmFileDTO.java b/src/main/java/kr/xit/framework/biz/cmm/model/CmmFileDTO.java
index cf2c6f95..28cc85eb 100644
--- a/src/main/java/kr/xit/framework/biz/cmm/model/CmmFileDTO.java
+++ b/src/main/java/kr/xit/framework/biz/cmm/model/CmmFileDTO.java
@@ -145,4 +145,33 @@ public class CmmFileDTO {
         private MultipartFile[] files;
         //private List<MultipartFile> files;
     }
+
+    @Getter
+    @Setter
+    @NoArgsConstructor
+    @AllArgsConstructor
+    @EqualsAndHashCode
+    @Builder
+    @ToString
+    public static class PaintwebReq implements Serializable {
+        private static final long SerialVersionUID = 1L;
+
+        private String interfaceSeqN;
+        private String ctznSttemntDetailSn;
+        private String fileMastrId;
+
+        private String jobSeCode;
+
+        private String fileJobId;
+        private String fileId;
+
+        private String orginlFileNm;
+        private String fileCours;
+        private String downloadUrl;
+
+        private String register;
+
+        private MultipartFile file;
+        //private List<MultipartFile> files;
+    }
 }
diff --git a/src/main/java/kr/xit/framework/biz/cmm/web/CmmFileMgtController.java b/src/main/java/kr/xit/framework/biz/cmm/web/CmmFileMgtController.java
index be6a7949..0627f793 100644
--- a/src/main/java/kr/xit/framework/biz/cmm/web/CmmFileMgtController.java
+++ b/src/main/java/kr/xit/framework/biz/cmm/web/CmmFileMgtController.java
@@ -60,6 +60,21 @@ public class CmmFileMgtController {
         return mav;
     }
 
+
+    @PostMapping(value = "/uploadPaintweb", consumes = "multipart/form-data")
+    public ModelAndView uploadPaintweb(final CmmFileDTO.PaintwebReq dto) {
+
+        ModelAndView mav = new ModelAndView(FrameworkConstants.JSON_VIEW);
+        // CmmFileDTO.FileMst cmmFileMst = CmmFileDTO.FileMst.builder()
+        //     .fileMastrId(cmmFileDto.getFileMastrId())
+        //     .jobSeCode(cmmFileDto.getJobSeCode())
+        //     .fileJobId(cmmFileDto.getFileJobId())
+        //     .build();
+        // cmmFileService.saveFiles(cmmFileMst, Arrays.asList(cmmFileDto.getFiles()));
+        AjaxMessageMapRenderer.success(mav, MessageKey.CMM_INSERT_SUCCESS);
+        return mav;
+    }
+
     @GetMapping("/{fileMstId}")
     public ModelAndView findFiles(@PathVariable("fileMstId") final String fileMstId) {
         if(Checks.isEmpty(fileMstId)) throw BizRuntimeException.create(MessageKey.CUSTOM_MSG, "대상 파일[fileMstId]을 선택해 주세요.");
diff --git a/src/main/resources/logback-local.xml b/src/main/resources/logback-local.xml
index d4e7f2bf..f1157003 100644
--- a/src/main/resources/logback-local.xml
+++ b/src/main/resources/logback-local.xml
@@ -3,7 +3,7 @@
 <configuration scan="true" scanPeriod="3600 seconds">
 
 	<property name="SLACK_WEBHOOK_URI" source="logging.slack.webhook-uri"/>
-	<property name="LOG_PATH" value="${user.home}/data/xit/logs"/>
+	<property name="LOG_PATH" value="${user.home}/data/fims/logs"/>
 
 	<property name="LOG_PATTERN" value="[%d{yyyy-MM-dd HH:mm:ss}:%-3relative][%thread] %-5level %logger{35} - %msg%n"/>
 	<property name="ROOT_LOG_LEVEL" value="WARN" />
@@ -201,7 +201,7 @@
 
 	<root level="WARN">
 		<appender-ref ref="CONSOLE"/>
-		<appender-ref ref="ASYNC_ROLLING"/>
+<!--		<appender-ref ref="ASYNC_ROLLING"/>-->
 		<!--		<appender-ref ref="ASYNC_ERROR_ROLLING"/>-->
 	</root>
 
diff --git a/src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp b/src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp
index 16c685fe..af9bd4be 100644
--- a/src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp
+++ b/src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp
@@ -1,5 +1,5 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
-<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
+<%@ include file="/WEB-INF/jsp/framework/taglibs.jsp" %>
 
 <!DOCTYPE html>
 <html>
@@ -11,6 +11,7 @@
     <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>
+    <script type="text/javascript" src="/resources/framework/js/cmm/cmmUtil.js"></script>
 </head>
 <body>
     <img id="editableImage"/>
@@ -19,6 +20,7 @@
 
 <script type="text/javascript">
     //TODO: srcImg 변수명 변경시 paintweb.js의 imageSaveTo() 내의 2669 line var url = srcImg.src; 변경 필요
+    var pw;
     var srcImg;
     let editImg =null;
 
@@ -27,18 +29,137 @@
     }
 
     const initEditor = () => {
-        const pw = new PaintWeb();
+        pw = new PaintWeb();
         pw.config.guiPlaceholder = document.getElementById('PaintWebTarget');
         pw.config.configFile = 'paintweb-config.json';
         pw.config.imageLoad = editImg;
 
-        pw.config.imageSaveURL = "/saveImage.do"; // imageSave == image upload
+        //pw.config.imageSaveURL = "/saveImage.do"; // imageSave == image upload
+        pw.config.imageSaveURL = "/saveImage"; // imageSave == image upload
         pw.config.imageDownloadURL = "/fileDownload.do";
-        pw.config.afterImageSave = afterImageSave;
+        //pw.config.afterImageSave = afterImageSave;
+        pw.config.imageSave = imageSaveTo;
+        pw.config.afterImageSave = () => window.close();
+
+        //var evId = pw.config.saveH('imageSave', saveHandler);
+        // Later you can remove the event handler
+        //pw.events.remove('imageSave', evId);
 
         pw.init();
     }
 
+    function imageSaveTo(file, doc, _self){
+        //downloadImage(idata, 'lllll');
+console.log(file)
+        this.image = {
+            filename: file.name,
+            size: file.size,
+            type: file.type,
+            lastModified: file.lastModified
+        }
+
+
+        //let formData = new FormData();
+        //formData.append('file', file);
+        const {interfaceSeqN, ctznSttemntDetailSn, fileMastrId, fileId} = srcImg.dataset;
+        const param = {
+            interfaceSeqN,
+            ctznSttemntDetailSn,
+            fileMastrId,
+            fileId: 'kdkdkdk',
+            orginlFileNm: srcImg.orginlFileNm,
+            file: file
+        }
+
+        cmmAjax({
+            url: '<c:out value="/framework/biz/cmm/file/uploadPaintweb.do"/>',
+            data: $.param(JSON.stringify(param)),
+        })
+
+        return;
+    }
+
+    function imageSaveTo2(idata, width, height, doc, _self){
+        debugger
+        alert('~~~~imageSaveTo~~~');
+        console.log(idata)
+        var ex = /\?filename=([a-z0-9\-]+)\&?/i;
+        var dashdash = '--';
+        var crlf     = '\r\n';
+
+        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+        var progressBar = doc.createElement("div");
+        progressBar.style.left = ((w-200)/2) + "px";
+        progressBar.className = "progressBar";
+        document.body.appendChild(progressBar);
+        var progressRate = doc.createElement("div");
+        progressRate.innerText = "Saving";
+        progressRate.className = "progressRate";
+        progressBar.appendChild(progressRate);
+
+        var url = srcImg.src;
+        var filename = url.match(ex)[1];
+
+        var boundary = 'multipartformboundary' + (new Date).getTime();
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", _self.config.imageSaveURL);
+        xhr.setRequestHeader('content-type', 'multipart/form-data; boundary='+ boundary);
+
+        var builder = dashdash + boundary + crlf + 'Content-Disposition: form-data; name="imageFile"' +
+            '; filename="' + filename + '";' + crlf + ' Content-Type: application/octet-stream' + crlf + crlf;
+        builder += idata;
+        builder += crlf + dashdash + boundary + crlf + 'Content-Disposition: form-data; name="filename"' + crlf + crlf + filename;
+        builder += crlf + dashdash + boundary + dashdash + crlf;
+
+        xhr.onload = function () {
+            var newImg = document.createElement("IMG");
+            newImg.onload = function () {
+                srcImg.src = newImg.src + "#img" + (new Date()).getTime();
+                if (_self.config.afterImageSave) _self.config.afterImageSave();
+            }
+            newImg.src = _self.config.imageDownloadURL + "?filename=" + filename+ "#img" + (new Date()).getTime();
+        };
+        xhr.upload.addEventListener("progress", function(evt){
+            if (evt.lengthComputable) {
+                var p = evt.loaded / evt.total * 100;
+                progressRate.style.width = p + "%";
+                progressRate.innerText = progressRate.style.width;
+                if (p==100) {
+                    progressRate.innerText = "Saved";
+                }
+            }
+        }, false);
+        xhr.send(builder);
+    }
+
+    function saveHandler (ev) {
+            // Cancel the default action of the event.
+        ev.preventDefault();
+alert('saveHandler~~~')
+        var handlerURL = 'image_save_script.php', send = 'dataURL=' + encodeURIComponent(ev.dataURL), headers = {'Content-Type': 'application/x-www-form-urlencoded'};
+
+
+        // 이미지를 저장하는 서버 측 스크립트로 데이터 URL을 보냅니다.
+        pwlib.xhrLoad ( handlerURL, saveReady, 'POST', send, header );
+    }
+
+    // The XMLHttpRequest onreadystatechange event handler.
+    function saveReady (xhr) {
+        alert('saveReady~~~')
+
+        if (!xhr || xhr.readyState !== 4) {
+            return;
+        }
+
+        if ((xhr.status !== 304 && xhr.status !== 200) || !xhr.responseText || xhr.responseText !== 'OK') {
+            // Image save failed.
+            pw.events.dispatch(new appEvent.imageSaveResult(false));
+            return;
+        }
+
+       // Image save was successful.
+       pw.events.dispatch(new appEvent.imageSaveResult(true));
+    }
 
 
     $(document).ready(function () {
diff --git a/src/main/webapp/resources/3rd-party/paintweb/paintweb.js b/src/main/webapp/resources/3rd-party/paintweb/paintweb.js
index 25729020..0c5bd9b4 100644
--- a/src/main/webapp/resources/3rd-party/paintweb/paintweb.js
+++ b/src/main/webapp/resources/3rd-party/paintweb/paintweb.js
@@ -2557,7 +2557,7 @@ function PaintWeb (win, doc) {
    *
    * @returns {Boolean} True if the operation was successful, or false if not.
    */
-  this.imageSave = function (type) {
+  this.imageSave = async function (type) {
     var canvas = _self.layer.canvas,
         cfg = _self.config,
         img = _self.image,
@@ -2568,8 +2568,9 @@ function PaintWeb (win, doc) {
       return false;
     }
 
-    var extMap = {'jpg' : 'image/jpeg', 'jpeg' : 'image/jpeg', 'png' 
-      : 'image/png', 'gif' : 'image/gif'};
+    var extMap = {
+      'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'png': 'image/png', 'gif': 'image/gif'
+    };
 
     // Detect the MIME type of the image currently loaded.
     if (typeof type !== 'string' || !type) {
@@ -2588,18 +2589,18 @@ function PaintWeb (win, doc) {
     // We consider that other formats than PNG do not support transparencies.  
     // Thus, we create a new Canvas element for which we set the configured 
     // background color, and we render the image onto it.
-    if (type !== 'image/png' || img.zoom!=1) {
+    if (type !== 'image/png' || img.zoom != 1) {
       canvas = doc.createElement('canvas');
       var context = canvas.getContext('2d');
 
-      canvas.width  = img.width * img.zoom;
-      canvas.height = img.height * img.zoom; 
+      canvas.width = img.width * img.zoom;
+      canvas.height = img.height * img.zoom;
 
       context.fillStyle = cfg.backgroundColor;
       context.fillRect(0, 0, img.width, img.height);
       context.drawImage(_self.layer.canvas, 0, 0, canvas.width, canvas.height);
 
-      context = null; 
+      context = null;
     }
 
     try {
@@ -2621,16 +2622,34 @@ function PaintWeb (win, doc) {
       return false;
     }
 
-    // by gujc
-    if (!_self.config.imageSaveURL) {
-		if (_self.config.afterImageSave) _self.config.afterImageSave(); 
-    	return;
+    //--------------------------------------------------------------------
+    // 변경된 부분
+    //--------------------------------------------------------------------
+    if (!_self.config.imageSave) {
+      if (_self.config.afterImageSave) _self.config.afterImageSave();
+      return;
     }
 
-    imageSaveTo(idata, img.width, img.height);
-    
+
+    //_self.config.imageSave(idata, img.width, img.height, doc, _self);
+
+    const fileObject = await toBlob(idata)
+        .then(res => {
+          console.log(res)
+          this.image = {
+            filename: res.name,
+            size: res.size,
+            type: res.type,
+            lastModified: res.lastModified
+          }
+          return res;
+        });
+    _self.config.imageSave(fileObject, img.width, img.height, doc, _self);
+
+
     return;
-    
+    //---------------------------------------------------------------------
+
     var ev = new appEvent.imageSave(idata, img.width, img.height),
         cancel = _self.events.dispatch(ev);
 
@@ -2638,12 +2657,30 @@ function PaintWeb (win, doc) {
       return true;
     }
 
+    /*
     var imgwin = _self.win.open();
     if (!imgwin) {
       return false;
     }
 
     imgwin.location = idata;
+*/
+
+    /*
+    var imgwin = _self.win.open();
+    if (!imgwin) {
+      return false;
+    }
+    imgwin.document.write('<iframe src="' + idata  + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
+*/
+    /*
+        var iframe = "<iframe width='100%' height='100%' src='" + idata + "'></iframe>";
+        var x = window.open();
+        x.document.open();
+        x.document.write(iframe);
+        x.document.close();
+    */
+
     idata = null;
 
     _self.events.dispatch(new appEvent.imageSaveResult(true));
@@ -3023,3 +3060,60 @@ PaintWeb.baseFolder = '';
 
 // vim:set spell spl=en fo=wan1croqlt tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix:
 
+
+var toBlob = async (url) => {
+  return () => {
+    this.base64Encode(url)
+        .then(res => {
+          let byteString = atob(res.dataUrl)
+          let ab = new ArrayBuffer(byteString.length)
+          let ia = new Uint8Array(ab)
+
+          for (let i = 0; i < byteString.length; i++) {
+            ia[i] = byteString.charCodeAt(i)
+          }
+
+          // write the array buffer to blob
+          let blob = new Blob([ab], {type: 'image/' + res.type})
+
+          let formData = new FormData()
+          formData.append('file', blob, res.name)
+          return formData.get('file')
+        })
+  }
+};
+
+/**
+ * 전달받은 이미지를 base64로 인코딩한다
+ */
+var base64Encode = async (url) => {
+  const re = new RegExp('.(gif|jpg|jpeg|tiff|png|ico)$', 'i')
+  let name = (/[^(/|\\)]*$/).exec(url)[0]
+  let type = re.test(name) ? re.exec(name)[0].replace('.', '') : 'jpg'
+
+  return () =>  {
+    let image = new Image()
+
+    image.onload = function (event) {
+      let canvas = document.createElement('canvas')
+      // draw canvas
+      canvas.width = image.naturalWidth
+      canvas.height = image.naturalHeight
+      canvas.getContext('2d').drawImage(image, 0, 0)
+
+      let dataUrl = canvas.toDataURL('image/' + type)
+      return {
+        name: name,
+        type: type,
+        dataUrl: dataUrl.split(',')[1]
+      }
+    }
+    image.onerror = function () {
+      let msg = `"${file}"을 로딩하는 데 오류가 발생하였습니다. 이미지 파일을 확인해주세요.`
+      alert(msg)
+      console.error(msg)
+    }
+    image.crossOrigin = 'anonymous';
+    image.src = url
+  }
+}
diff --git a/src/main/webapp/resources/framework/js/cmm/cmmUtil.js b/src/main/webapp/resources/framework/js/cmm/cmmUtil.js
index 3b64d07b..7bb70d45 100644
--- a/src/main/webapp/resources/framework/js/cmm/cmmUtil.js
+++ b/src/main/webapp/resources/framework/js/cmm/cmmUtil.js
@@ -508,7 +508,7 @@ function serialize (formData) {
  * </pre>
  */
 function downloadImage(img, fileName) {
-    var imgData = atob(img.src.split(',')[1]),
+    var imgData = atob(img.split(',')[1]),
         len = imgData.length,
         buf = new ArrayBuffer(len),
         view = new Uint8Array(buf),
@@ -529,8 +529,8 @@ function downloadImage(img, fileName) {
         //var url = URL.createObjectURL(blob);
         var a = document.createElement('a');
         a.style = 'display: none';
-        //a.href = url;
-        a.href = img.src;
+        a.href = URL.createObjectURL(blob);;
+        //a.href = img.src;
         a.download = fileName;
         document.body.appendChild(a);
         a.click();
@@ -541,3 +541,140 @@ function downloadImage(img, fileName) {
         }, 100);
     }
 }
+
+var readBlob = async () => {
+    const data = await fetch('https://play-lh.googleusercontent.com/hYdIazwJBlPhmN74Yz3m_jU9nA6t02U7ZARfKunt6dauUAB6O3nLHp0v5ypisNt9OJk');
+    const blob = await data.blob();
+    const reader = new FileReader();
+    reader.onload = () => {
+        const base64data = reader.result;
+        console.log(base64data)
+    }
+    reader.readAsDataURL(blob);
+
+    fetch('https://www.business2community.com/wp-content/uploads/2014/04/Free.jpg')
+        .then((response) => response.blob())
+        .then((blob) => {
+            const url = URL.createObjectURL(blob);
+            document.querySelector('img').src = url;
+            document.querySelector('a').href = url;
+        });
+}
+
+/**
+ *
+ * @param b64Data
+ * @param contentType
+ * @param sliceSize
+ * @returns {Blob}
+ */
+// bas64를 blob으로 변환해주는 함수
+function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
+    const image_data = atob(b64Data.split(',')[1]); // data:image/gif;base64 필요없으니 떼주고, base64 인코딩을 풀어준다
+
+    const arraybuffer = new ArrayBuffer(image_data.length);
+    const view = new Uint8Array(arraybuffer);
+
+    for (let i = 0; i < image_data.length; i++) {
+        view[i] = image_data.charCodeAt(i) & 0xff;
+        // charCodeAt() 메서드는 주어진 인덱스에 대한 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 반환
+        // 비트연산자 & 와 0xff(255) 값은 숫자를 양수로 표현하기 위한 설정
+    }
+
+    return new Blob([arraybuffer], { type: contentType });
+
+/*
+    const contentType = 'image/png';
+    const b64Data =
+        'data:image/gif;base64,R0lGODlhAAEAAcQAALe9v9ve3/b393mDiJScoO3u74KMkMnNz4uUmKatsOTm552kqK+1uNLW18DFx3B7gP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTE5QjEwQjYyNTc4MkUxRURBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjEzN0VEMDZBQjMyNzExRTE4REMzRUZGMkFCOTM1NkZBIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjEzN0VEMDY5QjMyNzExRTE4REMzRUZGMkFCOTM1NkZBIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDI4MDExNzQwNzIwNjgxMTlCMTBCNjI1NzgyRTFFREEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMTlCMTBCNjI1Nzgy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';
+
+    const blob = b64toBlob(b64Data, contentType); // base64 -> blob
+    const blobUrl = URL.createObjectURL(blob); // object url 생성
+
+    const img = document.createElement('img');
+    img.src = blobUrl;
+    document.body.appendChild(img);
+*/
+}
+
+/**
+ * 전달받은 이미지를 base64로 인코딩한다
+ * @param file - 이미지 파일 또는 이미지 URL
+ * @param maxWidth - 인코딩 시의 이미지 max width 사이즈
+ * @returns {Promise<any>}
+ */
+var readImage = () => {
+    let image = this.$refs.image.src
+    this.toBlob(image)
+        .then(res => {
+            console.log(res)
+            this.image = {
+                filename: res.name,
+                size: res.size,
+                type: res.type,
+                lastModified: res.lastModified
+            }
+        })
+};
+
+/**
+ * 이미지 url을 blob 파일로 변환하여 전달한다
+ * @param url
+ * @returns {Promise<any>}
+ */
+var toBlob = (url) => {
+    return new Promise((resolve, reject) => {
+        this.base64Encode(url)
+            .then(res => {
+                let byteString = atob(res.dataUrl)
+                let ab = new ArrayBuffer(byteString.length)
+                let ia = new Uint8Array(ab)
+
+                for (let i = 0; i < byteString.length; i++) {
+                    ia[i] = byteString.charCodeAt(i)
+                }
+
+                // write the array buffer to blob
+                let blob = new Blob([ab], {type: 'image/' + res.type})
+
+                let formData = new FormData()
+                formData.append('file', blob, res.name)
+                resolve(formData.get('file'))
+            })
+    })
+};
+
+/**
+ * 전달받은 이미지를 base64로 인코딩한다
+ */
+var base64Encode = (url) => {
+    const re = new RegExp('.(gif|jpg|jpeg|tiff|png|ico)$', 'i')
+    let name = (/[^(/|\\)]*$/).exec(url)[0]
+    let type = re.test(name) ? re.exec(name)[0].replace('.', '') : 'jpg'
+
+    return new Promise((resolve, reject) => {
+        let image = new Image()
+
+        image.onload = function (event) {
+            let canvas = document.createElement('canvas')
+            // draw canvas
+            canvas.width = image.naturalWidth
+            canvas.height = image.naturalHeight
+            canvas.getContext('2d').drawImage(image, 0, 0)
+
+            let dataUrl = canvas.toDataURL('image/' + type)
+            resolve({
+                name: name,
+                type: type,
+                dataUrl: dataUrl.split(',')[1]
+            })
+        }
+        image.onerror = function () {
+            let msg = `"${file}"을 로딩하는 데 오류가 발생하였습니다. 이미지 파일을 확인해주세요.`
+            alert(msg)
+            console.error(msg)
+        }
+        image.crossOrigin = 'anonymous';
+        image.src = url
+    })
+}

From 429f9739aade48a74f259d554cd9376cb22bd593 Mon Sep 17 00:00:00 2001
From: minuk926 <minuk926@gmail.com>
Date: Mon, 12 Dec 2022 15:00:55 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
 =?UTF-8?q?=EC=97=90=EB=94=94=ED=84=B0=20=EC=A7=84=ED=96=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../framework/biz/cmm/model/CmmFileDTO.java   |   4 +
 .../biz/cmm/web/CmmFileMgtController.java     |   2 +-
 .../jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp |   6 +-
 .../cmm/file/cmmPaintwebImageEditorPopup.jsp  | 115 +++---------------
 .../resources/framework/js/cmm/XitCmmnUtil.js |   1 +
 .../framework/js/cmm/cmmDownloadImg.js        |  64 ++--------
 6 files changed, 38 insertions(+), 154 deletions(-)

diff --git a/src/main/java/kr/xit/framework/biz/cmm/model/CmmFileDTO.java b/src/main/java/kr/xit/framework/biz/cmm/model/CmmFileDTO.java
index 28cc85eb..4b841eba 100644
--- a/src/main/java/kr/xit/framework/biz/cmm/model/CmmFileDTO.java
+++ b/src/main/java/kr/xit/framework/biz/cmm/model/CmmFileDTO.java
@@ -6,6 +6,8 @@ import java.util.List;
 
 import org.springframework.web.multipart.MultipartFile;
 
+import com.fasterxml.jackson.annotation.JsonIgnore;
+
 import lombok.AllArgsConstructor;
 import lombok.Builder;
 import lombok.EqualsAndHashCode;
@@ -142,6 +144,7 @@ public class CmmFileDTO {
         /**
          * 업로드 파일 객체
          */
+        @JsonIgnore
         private MultipartFile[] files;
         //private List<MultipartFile> files;
     }
@@ -171,6 +174,7 @@ public class CmmFileDTO {
 
         private String register;
 
+        @JsonIgnore
         private MultipartFile file;
         //private List<MultipartFile> files;
     }
diff --git a/src/main/java/kr/xit/framework/biz/cmm/web/CmmFileMgtController.java b/src/main/java/kr/xit/framework/biz/cmm/web/CmmFileMgtController.java
index 0627f793..6019352b 100644
--- a/src/main/java/kr/xit/framework/biz/cmm/web/CmmFileMgtController.java
+++ b/src/main/java/kr/xit/framework/biz/cmm/web/CmmFileMgtController.java
@@ -61,7 +61,7 @@ public class CmmFileMgtController {
     }
 
 
-    @PostMapping(value = "/uploadPaintweb", consumes = "multipart/form-data")
+    @PostMapping(value = "/uploadPaintweb")
     public ModelAndView uploadPaintweb(final CmmFileDTO.PaintwebReq dto) {
 
         ModelAndView mav = new ModelAndView(FrameworkConstants.JSON_VIEW);
diff --git a/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp b/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp
index 2dcdac52..986fee4b 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp
@@ -247,7 +247,11 @@
 				,data: {interfaceSeqN: '${reqDTO.interfaceSeqN}'}
 				,success: (res) => {
 					// 이미지 클릭시 image editor open
-					imgDownload(res.data?.contents, '#ctznImg', '${reqDTO.ctznSttemntDetailSn}', true);
+					const pr = {
+						interfaceSeqN: '${reqDTO.interfaceSeqN}',
+						ctznSttemntDetailSn: '${reqDTO.ctznSttemntDetailSn}'
+					}
+					imgDownload(res.data?.contents, '#ctznImg', pr, true);
 				}
 			})
 		}
diff --git a/src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp b/src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp
index af9bd4be..a458a9d1 100644
--- a/src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp
+++ b/src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp
@@ -41,10 +41,6 @@
         pw.config.imageSave = imageSaveTo;
         pw.config.afterImageSave = () => window.close();
 
-        //var evId = pw.config.saveH('imageSave', saveHandler);
-        // Later you can remove the event handler
-        //pw.events.remove('imageSave', evId);
-
         pw.init();
     }
 
@@ -61,107 +57,32 @@ console.log(file)
 
         //let formData = new FormData();
         //formData.append('file', file);
-        const {interfaceSeqN, ctznSttemntDetailSn, fileMastrId, fileId} = srcImg.dataset;
-        const param = {
-            interfaceSeqN,
-            ctznSttemntDetailSn,
-            fileMastrId,
-            fileId: 'kdkdkdk',
-            orginlFileNm: srcImg.orginlFileNm,
-            file: file
-        }
+        const {interfaceSeqN, ctznSttemntDetailSn, fileMastrId, fileId, fileCours} = srcImg.dataset;
+
+        let formData = new FormData();
+        formData.append('interfaceSeqN', interfaceSeqN);
+        formData.append('ctznSttemntDetailSn', ctznSttemntDetailSn);
+        formData.append('fileMastrId', fileMastrId);
+        formData.append('fileId', fileId);
+        formData.append('orginlFileNm', srcImg.name);
+        formData.append('fileCours', fileCours);
+        formData.append('file', file);
 
         cmmAjax({
+            type: 'post',
             url: '<c:out value="/framework/biz/cmm/file/uploadPaintweb.do"/>',
-            data: $.param(JSON.stringify(param)),
-        })
-
-        return;
-    }
-
-    function imageSaveTo2(idata, width, height, doc, _self){
-        debugger
-        alert('~~~~imageSaveTo~~~');
-        console.log(idata)
-        var ex = /\?filename=([a-z0-9\-]+)\&?/i;
-        var dashdash = '--';
-        var crlf     = '\r\n';
-
-        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-        var progressBar = doc.createElement("div");
-        progressBar.style.left = ((w-200)/2) + "px";
-        progressBar.className = "progressBar";
-        document.body.appendChild(progressBar);
-        var progressRate = doc.createElement("div");
-        progressRate.innerText = "Saving";
-        progressRate.className = "progressRate";
-        progressBar.appendChild(progressRate);
-
-        var url = srcImg.src;
-        var filename = url.match(ex)[1];
-
-        var boundary = 'multipartformboundary' + (new Date).getTime();
-        var xhr = new XMLHttpRequest();
-        xhr.open("POST", _self.config.imageSaveURL);
-        xhr.setRequestHeader('content-type', 'multipart/form-data; boundary='+ boundary);
-
-        var builder = dashdash + boundary + crlf + 'Content-Disposition: form-data; name="imageFile"' +
-            '; filename="' + filename + '";' + crlf + ' Content-Type: application/octet-stream' + crlf + crlf;
-        builder += idata;
-        builder += crlf + dashdash + boundary + crlf + 'Content-Disposition: form-data; name="filename"' + crlf + crlf + filename;
-        builder += crlf + dashdash + boundary + dashdash + crlf;
-
-        xhr.onload = function () {
-            var newImg = document.createElement("IMG");
-            newImg.onload = function () {
-                srcImg.src = newImg.src + "#img" + (new Date()).getTime();
-                if (_self.config.afterImageSave) _self.config.afterImageSave();
-            }
-            newImg.src = _self.config.imageDownloadURL + "?filename=" + filename+ "#img" + (new Date()).getTime();
-        };
-        xhr.upload.addEventListener("progress", function(evt){
-            if (evt.lengthComputable) {
-                var p = evt.loaded / evt.total * 100;
-                progressRate.style.width = p + "%";
-                progressRate.innerText = progressRate.style.width;
-                if (p==100) {
-                    progressRate.innerText = "Saved";
-                }
+            processData: false,
+            contentType: false,
+            data: formData,
+            success: (res) => {
+                console.log(res)
             }
-        }, false);
-        xhr.send(builder);
-    }
-
-    function saveHandler (ev) {
-            // Cancel the default action of the event.
-        ev.preventDefault();
-alert('saveHandler~~~')
-        var handlerURL = 'image_save_script.php', send = 'dataURL=' + encodeURIComponent(ev.dataURL), headers = {'Content-Type': 'application/x-www-form-urlencoded'};
-
-
-        // 이미지를 저장하는 서버 측 스크립트로 데이터 URL을 보냅니다.
-        pwlib.xhrLoad ( handlerURL, saveReady, 'POST', send, header );
-    }
-
-    // The XMLHttpRequest onreadystatechange event handler.
-    function saveReady (xhr) {
-        alert('saveReady~~~')
-
-        if (!xhr || xhr.readyState !== 4) {
-            return;
-        }
+        })
 
-        if ((xhr.status !== 304 && xhr.status !== 200) || !xhr.responseText || xhr.responseText !== 'OK') {
-            // Image save failed.
-            pw.events.dispatch(new appEvent.imageSaveResult(false));
-            return;
-        }
 
-       // Image save was successful.
-       pw.events.dispatch(new appEvent.imageSaveResult(true));
+        return;
     }
 
-
     $(document).ready(function () {
         srcImg = window.opener.document.getElementById('<c:out value="${imageTagId}"/>');
 
diff --git a/src/main/webapp/resources/framework/js/cmm/XitCmmnUtil.js b/src/main/webapp/resources/framework/js/cmm/XitCmmnUtil.js
index ed85dfbb..84c3a9ab 100644
--- a/src/main/webapp/resources/framework/js/cmm/XitCmmnUtil.js
+++ b/src/main/webapp/resources/framework/js/cmm/XitCmmnUtil.js
@@ -219,6 +219,7 @@ const cmmAjax = (param) => {
 		,data: param.data
 		,async: nvl(param.async, true)
 		,dataType: nvl(param.dataType, "json")
+		,processData: nvl(param.processData, true)
 		,contentType: nvl(param.contentType, 'application/x-www-form-urlencoded;charset=UTF-8')
 		,cache : false
 		,beforeSend: (jqXhr, settings) => {
diff --git a/src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js b/src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js
index 820626d5..92e4657f 100644
--- a/src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js
+++ b/src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js
@@ -9,12 +9,12 @@
  * @param {string} dtlSeq - 시민신고상세순번
  * </pre>
  */
-function imgDownload(cmmFileDtls, appendElementId, dtlSeq, isEditor) {
+function imgDownload(cmmFileDtls, appendElementId, reqDTO, isEditor) {
     const downloadUrl = '/framework/biz/cmm/file/download.do';
     cmmFileDtls.forEach((dtl, idx) => {
 
         const params = "?filename=" +dtl.orginlFileNm+ $.param(dtl);
-        const title = dtlSeq ? dtl.orginlFileNm+'['+dtlSeq+']' : dtl.orginlFileNm;
+        const title = reqDTO ? dtl.orginlFileNm+'['+reqDTO.ctznSttemntDetailSn+']' : dtl.orginlFileNm;
         const x = document.createElement("img");
         x.setAttribute("src", downloadUrl+params);
         x.setAttribute("id", dtl.fileId);
@@ -24,9 +24,14 @@ function imgDownload(cmmFileDtls, appendElementId, dtlSeq, isEditor) {
         //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.setAttribute("data-file-mastr-id", dtl.fileMastrId);
+        x.setAttribute("data-file-id", dtl.fileId);
+        x.setAttribute("data-file-cours", dtl.fileCours);
+        if(reqDTO) {
+            x.setAttribute("data-interface-seq-n", reqDTO.interfaceSeqN);
+            x.setAttribute("data-ctzn-sttemnt-detail-sn", reqDTO.ctznSttemntDetailSn);
+        }
         x.addEventListener('click', (e)=>{
             if(isEditor) {
                 fnBiz.pagePopup('imageEditor', {imageTagId: dtl.fileId});
@@ -40,57 +45,6 @@ function imgDownload(cmmFileDtls, appendElementId, dtlSeq, isEditor) {
     })
 }
 
-function imageSaveTo(idata, width, height){
-    var ex = /\?filename=([a-z0-9\-]+)\&?/i;
-    var dashdash = '--';
-    var crlf     = '\r\n';
-
-    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-    var progressBar = doc.createElement("div");
-    progressBar.style.left = ((w-200)/2) + "px";
-    progressBar.className = "progressBar";
-    document.body.appendChild(progressBar);
-    var progressRate = doc.createElement("div");
-    progressRate.innerText = "Saving";
-    progressRate.className = "progressRate";
-    progressBar.appendChild(progressRate);
-
-    var url = srcImg.src;
-    var filename = url.match(ex)[1];
-
-    var boundary = 'multipartformboundary' + (new Date).getTime();
-    var xhr = new XMLHttpRequest();
-    xhr.open("POST", _self.config.imageSaveURL);
-    xhr.setRequestHeader('content-type', 'multipart/form-data; boundary='+ boundary);
-
-    var builder = dashdash + boundary + crlf + 'Content-Disposition: form-data; name="imageFile"' +
-        '; filename="' + filename + '";' + crlf + ' Content-Type: application/octet-stream' + crlf + crlf;
-    builder += idata;
-    builder += crlf + dashdash + boundary + crlf + 'Content-Disposition: form-data; name="filename"' + crlf + crlf + filename;
-    builder += crlf + dashdash + boundary + dashdash + crlf;
-
-    xhr.onload = function () {
-        var newImg = document.createElement("IMG");
-        newImg.onload = function () {
-            srcImg.src = newImg.src + "#img" + (new Date()).getTime();
-            if (_self.config.afterImageSave) _self.config.afterImageSave();
-        }
-        newImg.src = _self.config.imageDownloadURL + "?filename=" + filename+ "#img" + (new Date()).getTime();
-    };
-    xhr.upload.addEventListener("progress", function(evt){
-        if (evt.lengthComputable) {
-            var p = evt.loaded / evt.total * 100;
-            progressRate.style.width = p + "%";
-            progressRate.innerText = progressRate.style.width;
-            if (p==100) {
-                progressRate.innerText = "Saved";
-            }
-        }
-    }, false);
-    xhr.send(builder);
-}
-
-
 /**
  * <pre>
  * 첨부파일 정보 목록으로 부터 이미지 download