xit-app
/
external-system-test
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 이미지에디터 진행

Browse Source
main
minuk926 2 years ago
parent 1b3dd9e50a
commit a2273b9ced
2 changed files with 111 additions and 90 deletions
Show Stats Download Patch File Download Diff File

63
src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp
Unescape Escape View File

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

138
src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js
Unescape Escape View File

@ -13,7 +13,7 @@ function imgDownload(cmmFileDtls, appendElementId, dtlSeq, isEditor) {
const downloadUrl = '/framework/biz/cmm/file/download.do'; const downloadUrl = '/framework/biz/cmm/file/download.do';
cmmFileDtls.forEach((dtl, idx) => { cmmFileDtls.forEach((dtl, idx) => {
const params = "?" + $.param(dtl); const params = "?filename=" +dtl.orginlFileNm+ $.param(dtl);
const title = dtlSeq ? dtl.orginlFileNm+'['+dtlSeq+']' : dtl.orginlFileNm; const title = dtlSeq ? dtl.orginlFileNm+'['+dtlSeq+']' : dtl.orginlFileNm;
const x = document.createElement("img"); const x = document.createElement("img");
x.setAttribute("src", downloadUrl+params); 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> * <pre>
* 첨부파일 정보 목록으로 부터 이미지 download * 첨부파일 정보 목록으로 부터 이미지 download
@ -60,68 +111,35 @@ function imgDownload2(cmmFileDtls, appendElementId, dtlSeq) {
,body: JSON.stringify(dtl) ,body: JSON.stringify(dtl)
} }
) )
.then(response => response.blob()) .then(response => response.blob())
.then(blob => { .then(blob => {
const title = dtlSeq ? dtl.orginlFileNm+'['+dtlSeq+']' : dtl.orginlFileNm; const title = dtlSeq ? dtl.orginlFileNm+'['+dtlSeq+']' : dtl.orginlFileNm;
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const x = document.createElement("img"); const x = document.createElement("img");
x.setAttribute("src", url); x.setAttribute("src", url);
//x.style = 'width:150px; display: block;'; //x.style = 'width:150px; display: block;';
x.style = 'height:300px;'; x.style = 'height:300px;';
//x.setAttribute("width", "304"); //x.setAttribute("width", "304");
//x.setAttribute("height", "228"); //x.setAttribute("height", "228");
x.setAttribute("title", title); x.setAttribute("title", title);
x.setAttribute("alt", dtl.orginlFileNm); x.setAttribute("alt", dtl.orginlFileNm);
//x.setAttribute("id", dtl.fileMastrId); //x.setAttribute("id", dtl.fileMastrId);
x.setAttribute("name", dtl.orginlFileNm); x.setAttribute("name", dtl.orginlFileNm);
x.setAttribute("ctznSttemntDetailSn", dtlSeq); x.setAttribute("ctznSttemntDetailSn", dtlSeq);
x.addEventListener('click', (e)=>{ x.addEventListener('click', (e)=>{
$('#uploadImage').attr("src", url); $('#uploadImage').attr("src", url);
$('#imageEditor').css('display', 'inline-block'); $('#imageEditor').css('display', 'inline-block');
fnBiz.pagePopup('imageEditor'); fnBiz.pagePopup('imageEditor');
}) })
document.querySelector(appendElementId).appendChild(x); document.querySelector(appendElementId).appendChild(x);
// Revoke Blob URL after DOM updates.. // Revoke Blob URL after DOM updates..
//window.URL.revokeObjectURL(objectURL); //window.URL.revokeObjectURL(objectURL);
}); });
}) })
} }
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) { function download(img) {
var link = document.createElement("a"); var link = document.createElement("a");
link.href = img.src; link.href = img.src;

Write Preview
Loading…
Cancel
Save