이미지 편집 수정

main
이범준 1 year ago
parent 4733043bb8
commit dce292e403

@ -262,6 +262,9 @@
</form>
</div>
<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="fs-4 fw-bold">등록된 사진</div>
@ -270,32 +273,20 @@
<button type="button" id="btnEditPhoto--${pageName}" class="btn btn-blue">선택 사진 편집</button>
</div>
</div>
<div id="display3--${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 id="display0--${pageName}" style="overflow-y: scroll;min-height: 40px;max-height: 340px;border-style: solid;">
</div>
<form id="frmFile--${pageName}" class="dpv eca" method="post" enctype="multipart/form-data">
<input type="file" id="uploadFileList--${pageName}" name="uploadFileList" multiple accept="image/*" hidden />
</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 d-flex justify-content-between">
<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>
</div>
<div id="display--${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" 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>
@ -312,13 +303,15 @@ $(document).ready(function(){
var $P = pageObject["${pageName}"];
$P.captureFileArr = [];
$P.localUploadArr = [];
$P.numberPlateArr = [];
/**************************************************************************
* DatasetControl, Dataset, FormFields
**************************************************************************/
$P.formFields = new FimsFormFields("#frmEdit--${pageName}");
$P.uploadSet = uploadSupport("#uploadFileList--${pageName}");
$P.uploadSet = uploadSupport("#inputUploadSet--${pageName}");
$P.crdnControl = new DatasetControl({
urls : { load : "", create : wctx.url("/${taskSeCd}/crdn/crdn01/020/save.do") },
@ -344,6 +337,13 @@ $(document).ready(function(){
if(formData.get("uploadFileList").size == 0){
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){
$P.captureFileArr.forEach(item => formData.append("uploadFileList",item));
}
@ -362,8 +362,13 @@ $(document).ready(function(){
$P.formFields.set(item);
}
$P.uploadSet.onDatasetChange = () => { $P.fnDisplay(); };
$P.uploadSet.onRemove = () => { $P.fnDisplay(); };
$P.uploadSet.onDatasetChange = () => {
var files = $P.uploadSet.getDataset();
files.forEach(item => $P.localUploadArr.push(item));
$P.fnDisplay();
};
$P.uploadSet.onRemove = () => { };
$P.crdnControl.onSave = (resp) => {
if (resp.saved) {
@ -377,17 +382,26 @@ $(document).ready(function(){
$P.fnDisplay = () => {
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 imgTags2 = "";
var imgTagsFromUploadSet = $P.localUploadArr.map(function(item){
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){
$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 = () => {
@ -430,13 +444,22 @@ $(document).ready(function(){
});
});
}
$P.editPhotoCallback = (modifiedFile, originalFileInfo, isNumberPlate) => {
console.log(modifiedFile);
console.log(originalFileInfo);
console.log(isNumberPlate);
}
/**************************************************************************
* element.on
**************************************************************************/
$("#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', () => {
var crdnId = $("#crdnId--${pageName}").val();
@ -446,7 +469,7 @@ $(document).ready(function(){
);
});
$("#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)
,"editPhoto"
@ -498,8 +521,7 @@ $(document).ready(function(){
$P.crdnControl.setData([crdnInfo]);
if(crdnInfo.videoExist == "N"){
$("#cpatureTitleArea--${pageName}").hide();
$("#display2--${pageName}").hide();
$("#btnOpenVideoCapture--${pageName}").hide();
}
if(crdnInfo.fileList){
@ -520,10 +542,10 @@ $(document).ready(function(){
}
});
$("#display3--${pageName}").append(editPhotoArea);
$("#display0--${pageName}").append(editPhotoArea);
} else {
$("#display3--${pageName}").append("등록된 사진이 없습니다.");
$("#display0--${pageName}").append("등록된 사진이 없습니다.");
$("#btnEditPhoto--crdn01020-info").hide();
}

@ -236,19 +236,18 @@
</form>
</div>
<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 />
</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">
<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>
</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>
@ -267,13 +266,14 @@ $(document).ready(function(){
var $P = pageObject["${pageName}"];
$P.captureFileArr = [];
$P.localUploadArr = [];
/**************************************************************************
* DatasetControl, Dataset, FormFields
**************************************************************************/
$P.formFields = new FimsFormFields("#frmEdit--${pageName}");
$P.uploadSet = uploadSupport("#uploadFileList--${pageName}");
$P.uploadSet = uploadSupport("#inputUploadSet--${pageName}");
$P.crdnControl = new DatasetControl({
urls : { load : "", create : wctx.url("/${taskSeCd}/crdn/crdn05/030/create.do") },
@ -299,6 +299,11 @@ $(document).ready(function(){
if(formData.get("uploadFileList").size == 0){
formData.delete("uploadFileList");
}
if($P.localUploadArr.length > 0){
$P.localUploadArr.forEach(item => formData.append("uploadFileList",item));
}
if($P.captureFileArr.length > 0){
$P.captureFileArr.forEach(item => formData.append("uploadFileList",item));
}
@ -313,8 +318,13 @@ $(document).ready(function(){
/**************************************************************************
* DatasetControl.on, Dataset.on
**************************************************************************/
$P.uploadSet.onDatasetChange = () => { $P.fnDisplay(); };
$P.uploadSet.onRemove = () => { $P.fnDisplay(); };
$P.uploadSet.onDatasetChange = () => {
var files = $P.uploadSet.getDataset();
files.forEach(item => $P.localUploadArr.push(item));
$P.fnDisplay();
};
$P.uploadSet.onRemove = () => { };
$P.crdnControl.onSave = (resp) => {
if (resp.saved) {
@ -328,17 +338,21 @@ $(document).ready(function(){
$P.fnDisplay = () => {
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 imgTags2 = "";
var imgTagsFromUploadSet = $P.localUploadArr.map(function(item){
return "<img src='"+item.url+"' width='200' height='200' />";
}).join("\n");
var imgTagsFromVideo = "";
if($P.captureFileArr.length > 0){
$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 = () => {
@ -387,7 +401,9 @@ $(document).ready(function(){
**************************************************************************/
$("#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', () => {
window.open(wctx.url("/sprt/sprt03/010/main.do?openerPageName=${pageName}")
,"newVideoCapture"

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

@ -2481,7 +2481,7 @@ function PaintWeb (win, doc) {
// 이미지 삭제인 경우 img.width, img.height 가 0
_self.config.imageSave(file, img.width, img.height, doc, _self);
//_self.config.afterImageSave();
_self.config.afterImageSave();
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));
pw.image.modified = true;
return true;
};
@ -2588,6 +2589,7 @@ function PaintWeb (win, doc) {
let jobCtx = _self.layer.context;
jobCtx.putImageData(filteredData, 0 , 0);
pw.image.modified = true;
}
this.brightnessCalc = function(pixels, sliderValue) {

Loading…
Cancel
Save