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..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,7 +144,38 @@ public class CmmFileDTO { /** * 업로드 파일 객체 */ + @JsonIgnore private MultipartFile[] files; //private List 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; + + @JsonIgnore + private MultipartFile file; + //private List 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 21113f82..e6393d43 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") + 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 @@ - + @@ -201,7 +201,7 @@ - + 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 21d63426..24403200 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 @@ -11,6 +11,7 @@ + @@ -27,25 +28,63 @@ } 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 = "/framework/biz/cmm/file/uploadPaintweb.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(); 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, 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: '', + processData: false, + contentType: false, + data: formData, + success: (res) => { + console.log(res) + } + }) + + + return; + } $(document).ready(function () { srcImg = window.opener.document.getElementById(''); - editImg = document.getElementById('editableImage'); editImg.src = srcImg.src; editImg.onload = function () { diff --git a/src/main/webapp/resources/3rd-party/paintweb/paintweb.js b/src/main/webapp/resources/3rd-party/paintweb/paintweb.js index 0a943887..aeae4cca 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(''); +*/ + /* + var iframe = ""; + var x = window.open(); + x.document.open(); + x.document.write(iframe); + x.document.close(); + */ + idata = null; _self.events.dispatch(new appEvent.imageSaveResult(true)); @@ -3033,3 +3070,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/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 3459b5b6..685eaa4d 100644 --- a/src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js +++ b/src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js @@ -6,15 +6,15 @@ * 이미지 url 사용 * @param {object} cmmFileDtls * @param {string} appendElementId - '#ctznImg' - * @param {object} stmtDtlDTO - 시민신고상세정보 + * @param {string} dtlSeq - 시민신고상세순번 * */ -function imgDownload(cmmFileDtls, appendElementId, reqDTO, isEditor) { +function imgDownload(cmmFileDtls, appendElementId, dtlSeq, isEditor) { const downloadUrl = '/framework/biz/cmm/file/download.do'; cmmFileDtls.forEach((dtl, idx) => { const params = "?filename=" +dtl.orginlFileNm+ $.param(dtl); - const title = reqDTO ? dtl.orginlFileNm+'['+reqDTO.ctznSttemntDetailSn+']' : dtl.orginlFileNm; + const title = dtlSeq ? dtl.orginlFileNm+'['+dtlSeq+']' : dtl.orginlFileNm; const x = document.createElement("img"); x.setAttribute("src", downloadUrl+params); x.setAttribute("id", dtl.fileId); @@ -27,6 +27,7 @@ function imgDownload(cmmFileDtls, appendElementId, reqDTO, isEditor) { x.setAttribute("name", dtl.orginlFileNm); 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); @@ -44,6 +45,56 @@ function imgDownload(cmmFileDtls, appendElementId, reqDTO, 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); +} + /** * 
@@ -80,7 +131,6 @@ function imgDownload2(cmmFileDtls, appendElementId, dtlSeq) {
                 x.setAttribute("alt", dtl.orginlFileNm);
                 //x.setAttribute("id", dtl.fileMastrId);
                 x.setAttribute("name", dtl.orginlFileNm);
-                x.setAttribute("fileMastrId", dtl.fileMastrId);
                 x.setAttribute("ctznSttemntDetailSn", dtlSeq);
                 x.addEventListener('click', (e)=>{
                     $('#uploadImage').attr("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) {
  *
*/ 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} + */ +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} + */ +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 + }) +}