feat: 이미지에디터 진행

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

@@ -18,36 +18,39 @@
     <div id="PaintWebTarget"></div>
 
 <script type="text/javascript">
-var srcImg = null, img1 =null;
+    //TODO: srcImg 변수명 변경시 paintweb.js의 imageSaveTo() 내의 2669 line var url = srcImg.src; 변경 필요
+    var srcImg;
+    let editImg =null;
 
-(function () {
+    const afterImageSave = () => {
-	srcImg = window.opener.document.getElementById('<c:out value="${imageTagId}"/>');
+        window.close();
-
-	img1 = document.getElementById('editableImage');
-	img1.src = srcImg.src;
-	img1.onload = function () {
-		initEditor();
-		img1.style.display = 'none';
     }
-})();
 
-function initEditor() {
+    const initEditor = () => {
-	var target = document.getElementById('PaintWebTarget'),
+        const pw = new PaintWeb();
-	pw = new PaintWeb();
+        pw.config.guiPlaceholder = document.getElementById('PaintWebTarget');
-	pw.config.guiPlaceholder = target;
         pw.config.configFile = 'paintweb-config.json';
-	pw.config.imageLoad 	 = img1;
+        pw.config.imageLoad = editImg;
-	//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();
+
-}
+    $(document).ready(function () {
+        srcImg = window.opener.document.getElementById('<c:out value="${imageTagId}"/>');
+
+        editImg = document.getElementById('editableImage');
+        editImg.src = srcImg.src;
+        editImg.onload = function () {
+            initEditor();
+            editImg.style.display = 'none';
+        }
+    });
 
 </script>
 </body>

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

@@ -13,7 +13,7 @@ function imgDownload(cmmFileDtls, appendElementId, dtlSeq, isEditor) {
     const downloadUrl = '/framework/biz/cmm/file/download.do';
     cmmFileDtls.forEach((dtl, idx) => {
 
-        const params = "?" + $.param(dtl);
+        const params = "?filename=" +dtl.orginlFileNm+ $.param(dtl);
         const title = dtlSeq ? dtl.orginlFileNm+'['+dtlSeq+']' : dtl.orginlFileNm;
         const x = document.createElement("img");
         x.setAttribute("src", downloadUrl+params);
@@ -40,6 +40,57 @@ 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
@@ -89,39 +140,6 @@ function imgDownload2(cmmFileDtls, appendElementId, dtlSeq) {
     })
 }
 
-
-function fn_uploadImage() {
-    $("#uploadImageFile").click();
-}
-
-function uploadImageFileChange() {
-    var formData = new FormData();
-    formData.append('upfile', $('#uploadImageFile')[0].files[0]);
-
-    $.ajax({
-        url: '/fileUpload.do',
-        data: formData,
-        type: 'POST',
-        contentType: false,
-        processData: false,
-        success: function (data) {
-            $('#uploadImage').attr("src", "/fileDownload.do?filename=" + data);
-            $('#imageEditor').css('display', 'inline-block');
-        }
-    });
-}
-
-function fn_modifyImage() {
-    fnBiz.pagePopup('imageEditor');
-    //var w = window.open("/imageEditor.do", "", "width=800,height=650,top=0px,left=200px,status=,resizable=false,scrollbars=no");
-}
-
-function fn_removeImage() {
-    $('#uploadImage').removeAttr("src");
-    $('#imageEditor').css('display', 'none');
-}
-
-
 function download(img) {
     var link = document.createElement("a");
     link.href = img.src;