xit-app
/
fims-web-all
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

이미지 편집 수정

Browse Source
main
이범준 1 year ago
parent 4733043bb8
commit dce292e403
4 changed files with 95 additions and 71 deletions
Show Stats Download Patch File Download Diff File

90
src/main/webapp/WEB-INF/jsp/fims/crdn/crdn01020-info.jsp
Unescape Escape View File

@ -262,6 +262,9 @@
</form> </form>
</div> </div>
<div class="card" style="width:500px;"> <div class="card" style="width:500px;">
<form id="frmFile--${pageName}" method="post" enctype="multipart/form-data">
<input type="file" id="uploadFileList--${pageName}" name="uploadFileList" multiple accept="image/*" hidden />
</form>
<div class="col-md-12 d-flex justify-content-between"> <div class="col-md-12 d-flex justify-content-between">
<div class="fs-4 fw-bold">등록된 사진</div> <div class="fs-4 fw-bold">등록된 사진</div>
@ -270,32 +273,20 @@
<button type="button" id="btnEditPhoto--${pageName}" class="btn btn-blue">선택 사진 편집</button> <button type="button" id="btnEditPhoto--${pageName}" class="btn btn-blue">선택 사진 편집</button>
</div> </div>
</div> </div>
<div id="display3--${pageName}" style="overflow-y: scroll;min-height: 40px;max-height: 340px;border-style: solid;"> <div id="display0--${pageName}" style="overflow-y: scroll;min-height: 40px;max-height: 340px;border-style: solid;">
</div>
<div class="col-md-12 d-flex justify-content-between">
<div class="fs-4 fw-bold">추가한 사진(번호판)</div>
<button type="button" id="btnNumberPlateDelete--${pageName}" class="btn btn-blue">취소</button>
</div>
<div id="display4--${pageName}" style="overflow-y: scroll;min-height: 40px;max-height: 340px;border-style: solid;">
</div> </div>
<form id="frmFile--${pageName}" class="dpv eca" method="post" enctype="multipart/form-data"> <form id="frmUploadSet--${pageName}" method="post" enctype="multipart/form-data">
<input type="file" id="uploadFileList--${pageName}" name="uploadFileList" multiple accept="image/*" hidden /> <input type="file" id="inputUploadSet--${pageName}" name="inputUploadSet" multiple accept="image/*" hidden />
</form> </form>
<div class="col-md-12 d-flex justify-content-between"> <div class="col-md-12 d-flex justify-content-between">
<div class="fs-4 fw-bold">추가한 사진</div> <div class="fs-4 fw-bold">추가한 사진</div>
<button type="button" id="btnOpenVideoCapture--${pageName}" class="btn btn-blue">동영상 캡쳐</button>
<button type="button" id="btnAddFile--${pageName}" class="btn btn-blue">사진 추가</button> <button type="button" id="btnAddFile--${pageName}" class="btn btn-blue">사진 추가</button>
</div> </div>
<div id="display--${pageName}" style="overflow-y: scroll;min-height: 40px;max-height: 340px;border-style: solid;"> <div id="display--${pageName}" style="overflow-y: scroll;min-height: 40px;max-height: 340px;border-style: solid;">
</div> </div>
<div class="col-md-12 d-flex justify-content-between" id="cpatureTitleArea--${pageName}">
<div class="fs-4 fw-bold">캡쳐 이미지</div>
<button type="button" id="btnOpenVideoCapture--${pageName}" class="btn btn-blue">동영상 캡쳐</button>
</div>
<div id="display2--${pageName}" style="overflow-y: scroll;min-height: 40px;max-height: 340px;border-style: solid;">
</div>
</div> </div>
@ -312,13 +303,15 @@ $(document).ready(function(){
var $P = pageObject["${pageName}"]; var $P = pageObject["${pageName}"];
$P.captureFileArr = []; $P.captureFileArr = [];
$P.localUploadArr = [];
$P.numberPlateArr = [];
/************************************************************************** /**************************************************************************
* DatasetControl, Dataset, FormFields * DatasetControl, Dataset, FormFields
**************************************************************************/ **************************************************************************/
$P.formFields = new FimsFormFields("#frmEdit--${pageName}"); $P.formFields = new FimsFormFields("#frmEdit--${pageName}");
$P.uploadSet = uploadSupport("#uploadFileList--${pageName}"); $P.uploadSet = uploadSupport("#inputUploadSet--${pageName}");
$P.crdnControl = new DatasetControl({ $P.crdnControl = new DatasetControl({
urls : { load : "", create : wctx.url("/${taskSeCd}/crdn/crdn01/020/save.do") }, urls : { load : "", create : wctx.url("/${taskSeCd}/crdn/crdn01/020/save.do") },
@ -344,6 +337,13 @@ $(document).ready(function(){
if(formData.get("uploadFileList").size == 0){ if(formData.get("uploadFileList").size == 0){
formData.delete("uploadFileList"); formData.delete("uploadFileList");
} }
if($P.localUploadArr.length > 0){
$P.localUploadArr.forEach(item => formData.append("uploadFileList",item));
}
if($P.numberPlateArr.length > 0){
$P.numberPlateArr.forEach(item => formData.append("uploadFileList",item));
}
if($P.captureFileArr.length > 0){ if($P.captureFileArr.length > 0){
$P.captureFileArr.forEach(item => formData.append("uploadFileList",item)); $P.captureFileArr.forEach(item => formData.append("uploadFileList",item));
} }
@ -362,8 +362,13 @@ $(document).ready(function(){
$P.formFields.set(item); $P.formFields.set(item);
} }
$P.uploadSet.onDatasetChange = () => { $P.fnDisplay(); }; $P.uploadSet.onDatasetChange = () => {
$P.uploadSet.onRemove = () => { $P.fnDisplay(); }; var files = $P.uploadSet.getDataset();
files.forEach(item => $P.localUploadArr.push(item));
$P.fnDisplay();
};
$P.uploadSet.onRemove = () => { };
$P.crdnControl.onSave = (resp) => { $P.crdnControl.onSave = (resp) => {
if (resp.saved) { if (resp.saved) {
@ -377,17 +382,26 @@ $(document).ready(function(){
$P.fnDisplay = () => { $P.fnDisplay = () => {
var displayArea = document.querySelector("#display--${pageName}"); var displayArea = document.querySelector("#display--${pageName}");
var imgTags = $P.uploadSet.inStrings("<img src='{url}' width='200' height='200' />").join("\n");
displayArea.innerHTML = imgTags;
var display2Area = document.querySelector("#display2--${pageName}"); var imgTagsFromUploadSet = $P.localUploadArr.map(function(item){
var imgTags2 = ""; return "<img src='"+item.url+"' width='200' height='200' />";
}).join("\n");
var imgTagsFromNumberPlate = "";
if($P.numberPlateArr.length > 0){
$P.numberPlateArr.forEach(function(item, index){
imgTagsFromNumberPlate += "<img src='" + item.url + "' width='200' height='200' />";
});
}
var imgTagsFromVideo = "";
if($P.captureFileArr.length > 0){ if($P.captureFileArr.length > 0){
$P.captureFileArr.forEach(function(item, index){ $P.captureFileArr.forEach(function(item, index){
imgTags2 += "<img src='" + item.url + "' width='200' height='200' />"; imgTagsFromVideo += "<img src='" + item.url + "' width='200' height='200' />";
}); });
} }
display2Area.innerHTML = imgTags2;
displayArea.innerHTML = imgTagsFromUploadSet + imgTagsFromNumberPlate + imgTagsFromVideo;
}; };
$P.fnSave = () => { $P.fnSave = () => {
@ -430,13 +444,22 @@ $(document).ready(function(){
}); });
}); });
}
$P.editPhotoCallback = (modifiedFile, originalFileInfo, isNumberPlate) => {
console.log(modifiedFile);
console.log(originalFileInfo);
console.log(isNumberPlate);
} }
/************************************************************************** /**************************************************************************
* element.on * element.on
**************************************************************************/ **************************************************************************/
$("#btnInst--${pageName}").on('click', () => $P.fnSave()); $("#btnInst--${pageName}").on('click', () => $P.fnSave());
$("#btnAddFile--${pageName}").on('click', () => { $("#uploadFileList--${pageName}").trigger("click"); });
$("#btnAddFile--${pageName}").on('click', () => { $("#inputUploadSet--${pageName}").trigger("click"); });
$("#btnOpenVideoCapture--${pageName}").on('click', () => { $("#btnOpenVideoCapture--${pageName}").on('click', () => {
var crdnId = $("#crdnId--${pageName}").val(); var crdnId = $("#crdnId--${pageName}").val();
@ -446,7 +469,7 @@ $(document).ready(function(){
); );
}); });
$("#btnEditPhoto--${pageName}").on('click', () => { $("#btnEditPhoto--${pageName}").on('click', () => {
var fileId = $("#display3--${pageName}").find("[name='editTarget']:checked").val(); var fileId = $("#display0--${pageName}").find("[name='editTarget']:checked").val();
window.open(wctx.url("/sprt/sprt03/020/main.do?openerPageName=${pageName}&fileId="+fileId) window.open(wctx.url("/sprt/sprt03/020/main.do?openerPageName=${pageName}&fileId="+fileId)
,"editPhoto" ,"editPhoto"
@ -498,8 +521,7 @@ $(document).ready(function(){
$P.crdnControl.setData([crdnInfo]); $P.crdnControl.setData([crdnInfo]);
if(crdnInfo.videoExist == "N"){ if(crdnInfo.videoExist == "N"){
$("#cpatureTitleArea--${pageName}").hide(); $("#btnOpenVideoCapture--${pageName}").hide();
$("#display2--${pageName}").hide();
} }
if(crdnInfo.fileList){ if(crdnInfo.fileList){
@ -520,10 +542,10 @@ $(document).ready(function(){
} }
}); });
$("#display3--${pageName}").append(editPhotoArea); $("#display0--${pageName}").append(editPhotoArea);
} else { } else {
$("#display3--${pageName}").append("등록된 사진이 없습니다."); $("#display0--${pageName}").append("등록된 사진이 없습니다.");
$("#btnEditPhoto--crdn01020-info").hide(); $("#btnEditPhoto--crdn01020-info").hide();
} }

50
src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05030-info.jsp
Unescape Escape View File

@ -236,19 +236,18 @@
</form> </form>
</div> </div>
<div class="card" style="width:400px;"> <div class="card" style="width:400px;">
<form id="frmFile--${pageName}" class="dpv eca" method="post" enctype="multipart/form-data"> <form id="frmFile--${pageName}" method="post" enctype="multipart/form-data">
<input type="file" id="uploadFileList--${pageName}" name="uploadFileList" multiple accept="image/*" hidden /> <input type="file" id="uploadFileList--${pageName}" name="uploadFileList" multiple accept="image/*" hidden />
</form> </form>
<form id="frmUploadSet--${pageName}" method="post" enctype="multipart/form-data">
<input type="file" id="inputUploadSet--${pageName}" name="inputUploadSet" multiple accept="image/*" hidden />
</form>
<div class="col-md-12"> <div class="col-md-12">
<button type="button" id="btnAddFile--${pageName}" class="btn btn-blue">이미지 추가</button> <button type="button" id="btnAddFile--${pageName}" class="btn btn-blue">이미지 추가</button>
</div>
<div id="display--${pageName}" style="overflow-y: scroll;height: 340px;border-style: solid;">
</div>
<div class="col-md-12">
<button type="button" id="btnOpenVideoCapture--${pageName}" class="btn btn-blue">동영상 캡쳐</button> <button type="button" id="btnOpenVideoCapture--${pageName}" class="btn btn-blue">동영상 캡쳐</button>
</div> </div>
<div id="display2--${pageName}" style="overflow-y: scroll;height: 340px;border-style: solid;"> <div id="display--${pageName}" style="overflow-y: scroll;height: 600px;border-style: solid;">
</div> </div>
</div> </div>
@ -267,13 +266,14 @@ $(document).ready(function(){
var $P = pageObject["${pageName}"]; var $P = pageObject["${pageName}"];
$P.captureFileArr = []; $P.captureFileArr = [];
$P.localUploadArr = [];
/************************************************************************** /**************************************************************************
* DatasetControl, Dataset, FormFields * DatasetControl, Dataset, FormFields
**************************************************************************/ **************************************************************************/
$P.formFields = new FimsFormFields("#frmEdit--${pageName}"); $P.formFields = new FimsFormFields("#frmEdit--${pageName}");
$P.uploadSet = uploadSupport("#uploadFileList--${pageName}"); $P.uploadSet = uploadSupport("#inputUploadSet--${pageName}");
$P.crdnControl = new DatasetControl({ $P.crdnControl = new DatasetControl({
urls : { load : "", create : wctx.url("/${taskSeCd}/crdn/crdn05/030/create.do") }, urls : { load : "", create : wctx.url("/${taskSeCd}/crdn/crdn05/030/create.do") },
@ -299,6 +299,11 @@ $(document).ready(function(){
if(formData.get("uploadFileList").size == 0){ if(formData.get("uploadFileList").size == 0){
formData.delete("uploadFileList"); formData.delete("uploadFileList");
} }
if($P.localUploadArr.length > 0){
$P.localUploadArr.forEach(item => formData.append("uploadFileList",item));
}
if($P.captureFileArr.length > 0){ if($P.captureFileArr.length > 0){
$P.captureFileArr.forEach(item => formData.append("uploadFileList",item)); $P.captureFileArr.forEach(item => formData.append("uploadFileList",item));
} }
@ -313,8 +318,13 @@ $(document).ready(function(){
/************************************************************************** /**************************************************************************
* DatasetControl.on, Dataset.on * DatasetControl.on, Dataset.on
**************************************************************************/ **************************************************************************/
$P.uploadSet.onDatasetChange = () => { $P.fnDisplay(); }; $P.uploadSet.onDatasetChange = () => {
$P.uploadSet.onRemove = () => { $P.fnDisplay(); }; var files = $P.uploadSet.getDataset();
files.forEach(item => $P.localUploadArr.push(item));
$P.fnDisplay();
};
$P.uploadSet.onRemove = () => { };
$P.crdnControl.onSave = (resp) => { $P.crdnControl.onSave = (resp) => {
if (resp.saved) { if (resp.saved) {
@ -328,17 +338,21 @@ $(document).ready(function(){
$P.fnDisplay = () => { $P.fnDisplay = () => {
var displayArea = document.querySelector("#display--${pageName}"); var displayArea = document.querySelector("#display--${pageName}");
var imgTags = $P.uploadSet.inStrings("<img src='{url}' width='200' height='200' />").join("\n");
displayArea.innerHTML = imgTags;
var display2Area = document.querySelector("#display2--${pageName}"); var imgTagsFromUploadSet = $P.localUploadArr.map(function(item){
var imgTags2 = ""; return "<img src='"+item.url+"' width='200' height='200' />";
}).join("\n");
var imgTagsFromVideo = "";
if($P.captureFileArr.length > 0){ if($P.captureFileArr.length > 0){
$P.captureFileArr.forEach(function(item, index){ $P.captureFileArr.forEach(function(item, index){
imgTags2 += "<img src='" + item.url + "' width='200' height='200' />"; imgTagsFromVideo += "<img src='" + item.url + "' width='200' height='200' />";
}); });
} }
display2Area.innerHTML = imgTags2;
displayArea.innerHTML = imgTagsFromUploadSet + imgTagsFromVideo;
}; };
$P.fnSave = () => { $P.fnSave = () => {
@ -387,7 +401,9 @@ $(document).ready(function(){
**************************************************************************/ **************************************************************************/
$("#btnInst--${pageName}").on('click', () => $P.fnSave()); $("#btnInst--${pageName}").on('click', () => $P.fnSave());
$("#btnAddFile--${pageName}").on('click', () => { $("#uploadFileList--${pageName}").trigger("click"); });
$("#btnAddFile--${pageName}").on('click', () => { $("#inputUploadSet--${pageName}").trigger("click"); });
$("#btnOpenVideoCapture--${pageName}").on('click', () => { $("#btnOpenVideoCapture--${pageName}").on('click', () => {
window.open(wctx.url("/sprt/sprt03/010/main.do?openerPageName=${pageName}") window.open(wctx.url("/sprt/sprt03/010/main.do?openerPageName=${pageName}")
,"newVideoCapture" ,"newVideoCapture"

22
src/main/webapp/WEB-INF/jsp/fims/sprt/sprt03020-main.jsp
Unescape Escape View File

@ -76,6 +76,7 @@
<script> <script>
var openerPageName = "${openerPageName}";
//FIXME: pw instance 변수명 변경시 paintweb.js의 imageSaveTo() 내의 2564 line if(pw.image.modified) 변경 필요 //FIXME: pw instance 변수명 변경시 paintweb.js의 imageSaveTo() 내의 2564 line if(pw.image.modified) 변경 필요
var pw; var pw;
@ -105,28 +106,11 @@
if(!confirm('편집한 단속이미지를 저장하시겠습니까?')) return; if(!confirm('편집한 단속이미지를 저장하시겠습니까?')) return;
} }
// window.opener.pageObject[openerPageName].editPhotoCallback(file, originalInfomation, isNumberPlate);
return true;
// var param = originalInfomation 파일아이디,단속아이디,inpoType..
// 번호판일때
if(isNumberPlate){
return true;
} else {
// 저장일때
const formData = new FormData();
//formData.append('fileId', fileId);
//formData.append('file', file);
return true;
}
}; };
function fnAfterImageSave(){ function fnAfterImageSave(){
window.close(); window.close();
}; };

4
src/main/webapp/resources/lib/fims/biz/paintweb/paintweb.js
Unescape Escape View File

@ -2481,7 +2481,7 @@ function PaintWeb (win, doc) {
// 이미지 삭제인 경우 img.width, img.height 가 0 // 이미지 삭제인 경우 img.width, img.height 가 0
_self.config.imageSave(file, img.width, img.height, doc, _self); _self.config.imageSave(file, img.width, img.height, doc, _self);
//_self.config.afterImageSave(); _self.config.afterImageSave();
return; return;
//--------------------------------------------------------------------- //---------------------------------------------------------------------
@ -2548,6 +2548,7 @@ function PaintWeb (win, doc) {
_self.events.dispatch(new appEvent.canvasSizeChange(bufferCanvas.width * img.canvasScale, bufferCanvas.height * img.canvasScale, img.canvasScale)); _self.events.dispatch(new appEvent.canvasSizeChange(bufferCanvas.width * img.canvasScale, bufferCanvas.height * img.canvasScale, img.canvasScale));
pw.image.modified = true;
return true; return true;
}; };
@ -2588,6 +2589,7 @@ function PaintWeb (win, doc) {
let jobCtx = _self.layer.context; let jobCtx = _self.layer.context;
jobCtx.putImageData(filteredData, 0 , 0); jobCtx.putImageData(filteredData, 0 , 0);
pw.image.modified = true;
} }
this.brightnessCalc = function(pixels, sliderValue) { this.brightnessCalc = function(pixels, sliderValue) {

Write Preview
Loading…
Cancel
Save