이미지 편집 수정중

main
이범준 1 year ago
parent 6cca0884d9
commit f9d32847a5

@ -2,7 +2,7 @@
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<div class="d-flex flex-row justify-content-evenly">
<div class="card" style="max-width:1100px;" title="민원접수 초기자료 편집">
<div class="card" style="max-width:1000px;" title="민원접수 초기자료 편집">
<form id="frmEdit--${pageName}">
<input id="crdnId--${pageName}" name="crdnId" type="hidden" data-map="CRDN_ID" />
<input id="taskSeCd--${pageName}" name="taskSeCd" type="hidden" value="${taskSeCd}" />
@ -10,7 +10,7 @@
<div class="col-md-12" slot="edit">
<template class="pvs bpv">
<slot>
<label for="crdnSeCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">단속구분</label>
<label for="crdnSeCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">단속구분</label>
<select id="crdnSeCd--${pageName}" name="crdnSeCd" data-map="CRDN_SE_CD" class="form-select">
<c:forEach items="${FIM002List}" var="item">
<option value="${item.code}">${item.value}</option>
@ -20,7 +20,7 @@
</template>
</div>
<div class="col-md-4">
<label for="crdnYmd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end required">
<label for="crdnYmd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end required">
위반일자
</label>
<input type="text" id="crdnYmd--${pageName}" name="crdnYmd" data-map="CRDN_YMD"
@ -28,7 +28,7 @@
<button type="button" class="bx bx-sm bx-calendar bg-white"></button>
</div>
<div class="col-md-4">
<label for="crdnTm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end required">
<label for="crdnTm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end required">
위반시간
</label>
<input type="text" id="crdnTm--${pageName}" name="crdnTm" data-map="CRDN_TM"
@ -36,14 +36,14 @@
placeholder="시:분:초" />
</div>
<div class="col-md-4">
<label for="vhrno--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end required">
<label for="vhrno--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end required">
차량번호
</label>
<input type="text" id="vhrno--${pageName}" name="vhrno" data-map="VHRNO" class="form-control"
data-maxlengthb="30" required />
</div>
<div class="col-md-6">
<label for="vltnCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">
<label for="vltnCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">
위반내용
</label>
<select id="vltnCd--${pageName}" name="vltnCd" class="form-select" data-map="VLTN_CD">
@ -53,26 +53,26 @@
</select>
</div>
<div class="col-md-6 select2-primary">
<label for="crdnStdgNm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">법정동</label>
<label for="crdnStdgNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">법정동</label>
<input type="text" id="crdnStdgNm--${pageName}" name="crdnStdgNm" data-map="CRDN_STDG_NM" class="form-control" readonly/>
<button type="button" class="btn btn-sm btn-outline-dark" onclick="">검색</button>
</div>
<div class="col-md-4">
<label for="crdnPlc--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">위반장소</label>
<label for="crdnPlc--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">위반장소</label>
<input type="text" id="crdnPlc--${pageName}" name="crdnPlc" data-map="CRDN_PLC" class="form-control"
data-maxlengthb="200" />
</div>
<div class="col-md-8" slot="edit">
<template class="bpv">
<slot>
<label for="dtlCrdnPlc--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">상세위반장소</label>
<label for="dtlCrdnPlc--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">상세위반장소</label>
<input type="text" id="dtlCrdnPlc--${pageName}" name="dtlCrdnPlc" data-map="DTL_CRDN_PLC" class="form-control"
data-maxlenghb="200" />
</slot>
</template>
<template class="pvs">
<slot>
<label for="crdnSpareaCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">특별구역</label>
<label for="crdnSpareaCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">특별구역</label>
<select id="crdnSpareaCd--${pageName}" name="crdnSpareaCd" data-map="CRDN_SPAREA_CD" class="form-select">
<c:forEach items="${FIM007List}" var="item">
<option value="${item.code}">${item.value}</option>
@ -82,45 +82,45 @@
</template>
</div>
<div class="col-md-6">
<label for="cvlcptAplcntNm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">신고자</label>
<label for="cvlcptAplcntNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">신고자</label>
<input type="text" id="cvlcptAplcntNm--${pageName}" name="cvlcptAplcntNm" data-map="CVLCPT_APLCNT_NM"
class="form-control" />
</div>
<div class="col-md-6">
<label for="cvlcptPrcsPicNm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">담당자</label>
<label for="cvlcptPrcsPicNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">담당자</label>
<input type="text" id="cvlcptPrcsPicNm--${pageName}" name="cvlcptPrcsPicNm" data-map="CVLCPT_PRCS_PIC_NM"
class="form-control" />
</div>
<div class="col-md-12">
<label for="cvlcptAplyCn--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end align-top"
<label for="cvlcptAplyCn--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end align-top"
>신고내용</label>
<textarea type="text" id="cvlcptAplyCn--${pageName}" name="cvlcptAplyCn" data-map="CVLCPT_APLY_CN"
class="form-control" cols="100%" rows="4"
></textarea>
</div>
<div class="col-md-6">
<label for="cvlcptRcptYmd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">접수일</label>
<label for="cvlcptRcptYmd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">접수일</label>
<input type="text" id="cvlcptRcptYmd--${pageName}" name="cvlcptRcptYmd" data-map="CVLCPT_RCPT_YMD"
class="form-control form-date" data-fmt-type="day" maxlength="10" disabled />
</div>
<div class="col-md-6">
<label for="cvldptPrcsPrnmntDt--${pageName}"
class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">답변기한</label>
class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">답변기한</label>
<input type="text" id="cvldptPrcsPrnmntDt--${pageName}" name="cvldptPrcsPrnmntDt" data-map="CVLCPT_PRCS_PRNMNT_DT"
class="form-control form-date" data-fmt-type="day" maxlength="10" disabled />
</div>
<div class="col-md-12">
<label for="etcCn--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">특기사항</label>
<label for="etcCn--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">특기사항</label>
<input type="text" id="etcCn--${pageName}" name="etcCn" data-map="ETC_CN" class="form-control"
data-maxlengthb="1000" />
</div>
<div class="col-md-4">
<label for="rtpyrNm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">소유자</label>
<label for="rtpyrNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">소유자</label>
<input type="text" id="rtpyrNm--${pageName}" name="rtpyrNm" data-map="RTPYR_NM" class="form-control"
/>
</div>
<div class="col-md-4">
<label for="rtpyrSeCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">주민번호구분</label>
<label for="rtpyrSeCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">주민번호구분</label>
<select id="rtpyrSeCd--${pageName}" name="rtpyrSeCd" data-map="RTPYR_SE_CD" class="form-select">
<c:forEach items="${FIM011List}" var="item">
<option value="${item.code}">${item.value}</option>
@ -128,22 +128,22 @@
</select>
</div>
<div class="col-md-4">
<label for="rtpyrNo--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">주민번호</label>
<label for="rtpyrNo--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">주민번호</label>
<input type="text" id="rtpyrNo--${pageName}" name="rtpyrNo" data-map="RTPYR_NO" class="form-control privacy" />
<input type="text" id="mask-rtpyrNo--${pageName}" class="form-control privacy-mask" disabled value="******"/>
</div>
<div class="col-md-12">
<label for="addr--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">주소</label>
<label for="addr--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">주소</label>
<input type="text" id="addr--${pageName}" name="addr" data-map="ADDR" class="form-control w-px-700"
data-maxlengthb="320" />
</div>
<div class="col-md-12">
<label for="dtlAddr--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">상세주소</label>
<label for="dtlAddr--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">상세주소</label>
<input type="text" id="dtlAddr--${pageName}" name="dtlAddr" data-map="DTL_ADDR" class="form-control w-px-700"
data-maxlengthb="200" />
</div>
<div class="col-md-6">
<label for="zip--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">우편번호</label>
<label for="zip--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">우편번호</label>
<input type="text" id="zip--${pageName}" name="zip" data-map="ZIP" class="form-control w-px-100"
maxlength="7" pattern="(\d{3}-\d{3}|\d{6}|\d{5})" />
<button type="button" class="btn btn-sm btn-outline-dark" onclick="">검색</button>
@ -152,36 +152,36 @@
</div>
<div class="col-md-4">
<label for="vin--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차대번호</label>
<label for="vin--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">차대번호</label>
<input type="text" id="vin--${pageName}" name="vin" data-map="VIN" class="form-control" readonly
placeholder="입력항목이 아닙니다." />
</div>
<div class="col-md-4" slot="edit">
<template class="pvs bpv">
<slot>
<label class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차량구분</label>
<label class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">차량구분</label>
</slot>
</template>
</div>
<div class="col-md-4" slot="edit">
<template class="pvs bpv">
<slot>
<label class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차종</label>
<label class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">차종</label>
</slot>
</template>
</div>
<div class="col-md-4">
<label for="vhclNm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차량명칭</label>
<label for="vhclNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">차량명칭</label>
<input type="text" id="vhclNm--${pageName}" name="vhclNm" data-map="VHCL_NM" class="form-control" readonly
placeholder="입력항목이 아닙니다." />
</div>
<div class="col-md-4">
<label for="vhclColor--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차량색상</label>
<label for="vhclColor--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">차량색상</label>
<input type="text" id="vhclColor--${pageName}" name="vhclColor" data-map="VHCL_COLOR" class="form-control" readonly
placeholder="입력항목이 아닙니다." />
</div>
<div class="col-md-4">
<label for="useFuelCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">연료구분</label>
<label for="useFuelCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">연료구분</label>
<select id="useFuelCd--${pageName}" name="useFuelCd" data-map="USE_FUEL_CD" class="form-select" disabled>
<c:forEach items="${LVS005List}" var="item">
<option value=""></option>
@ -192,7 +192,7 @@
<div class="col-md-4" slot="edit">
<template class="dpv eca pvs">
<slot>
<label for="towngYn--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">견인지시</label>
<label for="towngYn--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">견인지시</label>
<select id="towngYn--${pageName}" name="towngYn" class="form-select" data-map="TOWNG_YN">
<c:forEach items="${FIM053List}" var="item">
<option value="${item.code}">${item.value}</option>
@ -204,7 +204,7 @@
<div class="col-md-4" slot="edit">
<template class="dpv eca pvs">
<slot>
<label for="crdnSn--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">스티커번호</label>
<label for="crdnSn--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">스티커번호</label>
<input type="text" id="crdnSn--${pageName}" name="crdnSn" data-map="CRDN_SN" class="form-control"
maxlength="20" data-maxlengthb="20" />
</slot>
@ -213,7 +213,7 @@
<div class="col-md-4" slot="edit">
<template class="dpv">
<slot>
<label for="parkngPsbltyRsltCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">장애차량확인</label>
<label for="parkngPsbltyRsltCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">장애차량확인</label>
<select id="parkngPsbltyRsltCd--${pageName}" name="parkngPsbltyRsltCd" data-map="PARKNG_PSBLTY_RSLT_CD" class="form-select">
<c:forEach items="${FIM034List}" var="item">
<option value="${item.code}">${item.value}</option>
@ -225,7 +225,7 @@
<div class="col-md-12" slot="edit">
<template class="pvs bpv">
<slot>
<label for="teamNm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">단속조</label>
<label for="teamNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">단속조</label>
<select id="teamNm--${pageName}" name="teamNm" data-map="TEAM_NM" class="form-select">
</select>
</slot>
@ -234,7 +234,7 @@
<div class="col-md-12" slot="edit">
<template class="pvs bpv">
<slot>
<label class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">단속원</label>
<label class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">단속원</label>
<input type="text" id="teamer1--${pageName}" name="teamer1" data-map="TEAMER_1" class="form-control" />
<input type="text" id="teamer2--${pageName}" name="teamer2" data-map="TEAMER_2" class="form-control" />
<input type="text" id="teamer3--${pageName}" name="teamer3" data-map="TEAMER_3" class="form-control" />
@ -261,17 +261,28 @@
</form>
</div>
<div class="card" style="width:400px;">
<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>
<div class="card" style="width:500px;">
<div class="col-md-12 d-flex justify-content-between">
<div class="fs-4 fw-bold">등록된 사진</div>
<div>
<button type="button" id="btnDeleteExistPhoto--${pageName}" class="btn btn-blue">선택 사진 삭제</button>
<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>
<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>
<div class="col-md-12 d-flex justify-content-between">
<div class="fs-4 fw-bold">추가한 사진</div>
<button type="button" id="btnAddFile--${pageName}" class="btn btn-blue">사진 추가</button>
@ -439,7 +450,7 @@ $(document).ready(function(){
window.open(wctx.url("/sprt/sprt03/020/main.do?openerPageName=${pageName}&fileId="+fileId)
,"editPhoto"
,"width=1800,height=950"
,"width=1400,height=750"
);
});
@ -495,7 +506,7 @@ $(document).ready(function(){
var editPhotoArea = "";
crdnInfo.fileList.forEach(function(item, index){
editPhotoArea += "<label>"
editPhotoArea += "<label class='mx-2'>"
editPhotoArea += "<input type='radio' name='editTarget' class='form-check-input' value='"+item.FILE_ID +"' ";
if(index == 0){
editPhotoArea += " checked='checked' ";
@ -503,7 +514,10 @@ $(document).ready(function(){
editPhotoArea += " />";
editPhotoArea += "<img src='"+ item.URL +"' width='200' height='200' />";
editPhotoArea += "</label>";
editPhotoArea += "<br />";
if(index % 2 == 1){
editPhotoArea += "<br />"
}
});
$("#display3--${pageName}").append(editPhotoArea);

@ -41,11 +41,11 @@
</head>
<body>
<c:set var="pageKorName" scope="request">사진 편집</c:set>
<div>
<img id="photo" src="" />
</div>
<img id="editableImage" />
<div id="paintWebTarget"></div>
<script src="<c:url value="/resources/3rd-party/sneat/js/helpers.js"/>"></script>
<script src="<c:url value="/resources/3rd-party/sneat/libs/jquery/jquery.js"/>"></script>
@ -60,23 +60,114 @@
<script src="<c:url value="/resources/3rd-party/jstree/jstree-support.js"/>"></script>
<script src="<c:url value='/resources/3rd-party/sneat/js/config.js'/>"></script>
<script src="<c:url value='/resources/3rd-party/sneat/libs/chartjs/chartjs.js'/>"></script>
<script src="<c:url value='/resources/lib/fims/biz/paintweb/lang/ko.js'/>?${ver}"></script>
<script src="<c:url value='/resources/lib/fims/biz/paintweb/paintweb-config.js'/>?${ver}"></script>
<script src="<c:url value='/resources/lib/fims/biz/paintweb/paintweb.js'/>?${ver}"></script>
<script src="<c:url value='/resources/lib/fims/biz/paintweb/html2canvas.min.js'/>?${ver}"></script>
<script>
$(document).ready(function(){
//FIXME: pw instance 변수명 변경시 paintweb.js의 imageSaveTo() 내의 2564 line if(pw.image.modified) 변경 필요
var pw;
var originalInfomation = {};
let editableImage = null;
const initEditor = () => {
pw = new PaintWeb();
pw.config.imageLoad = editableImage;
pw.config.guiPlaceholder = document.getElementById('paintWebTarget');
pw.config.configFile = 'paintweb-config.json?${ver}';
pw.config.imageSave = fnImageSaveTo;
pw.config.afterImageSave = fnAfterImageSave;
pw.init();
};
function fnImageSaveTo(file, imgWidth, imgHeight, doc, _self){
console.log(doc);
console.log(_self);
const isDelete = imgWidth === 0;
if(isDelete){
if(!confirm('단속이미지를 정말로 삭제 하시겠습니까?')) return;
}else{
if(!confirm('편집한 단속이미지를 저장하시겠습니까?')) return;
}
//
// var param = originalInfomation 파일아이디,단속아이디,inpoType..
// 삭제일때
if(isDelete){
//cmmAjax({
// url: '/somePath/removeFile.do',
// data: $.param(param),
// success: (res) => {
// window.opener.callbackReloadImage();
// window.close();
// }
//})
return true;
}
// 저장일때
const formData = new FormData();
//formData.append('fileId', fileId);
//formData.append('file', file);
//cmmAjax({
// type: 'post',
// url: '/somePath/save.do',
// processData: false,
// contentType: false,
// data: formData,
// success: (res) => {
// window.opener.callbackReloadImage();
// window.close();
// }
//});
return true;
};
function fnAfterImageSave(){
console.log('after...');
window.close();
};
$(document).ready(function(){
var fileInfo = [${fileInfo}];
if(fileInfo.length > 0){
originalInfomation = fileInfo[0];
var fileUrl = fileInfo[0].URL;
var fullSrc = "${pageContext.request.contextPath}" + "/" + fileUrl;
editableImage = document.getElementById('editableImage');
editableImage.src = fullSrc;
editableImage.onload = function () {
initEditor();
editableImage.style.display = 'none';
}
$("#photo").attr("src", "${pageContext.request.contextPath}" + "/" + fileUrl);
} else {
alert("사진 파일이 없습니다.");
}
});
});
</script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -29,16 +29,17 @@
<li data-pwTool="selection">Selection</li>
<!--<li data-pwTool="hand">Hand</li>-->
<li data-pwTool="rectangle">Rectangle</li>
<!-- <li data-pwTool="rectangle">Rectangle</li> -->
<li class="paintweb_toolSeparator">&#160;</li>
<!--<li data-pwCommand="selectionCut">Cut selection</li>-->
<!--<li data-pwCommand="selectionCopy">Copy selection</li>-->
<li data-pwCommand="selectionCrop">자르기</li>
<li data-pwCommand="selectionFill">가림막</li>
<li data-pwCommand="selectionCopy">번호판</li>
<!--<li data-pwCommand="clipboardPaste">Clipboard paste</li>-->
<li data-pwCommand="selectionCrop">Crop selection</li>
<li data-pwCommand="selectionFill">Fill selection</li>
<!--<li data-pwTool="insertimg">Insert image</li>-->
<!--
<li class="paintweb_strokeFillStyles">
<p class="paintweb_opt_fillStyle">Fill
<span data-pwColorInput="fillStyle">&#160;</span>
@ -47,7 +48,7 @@
<span data-pwColorInput="strokeStyle">&#160;</span>
</p>
</li>
-->
<li class="paintweb_toolSeparator">&#160;</li>
<li data-pwCommand="imageRotate">Rotate image</li>
@ -72,7 +73,7 @@
<!--<li data-pwTool="pencil">Pencil</li>-->
<!--<li data-pwTool="eraser">Eraser</li>-->
<li data-pwCommand="imageClear">Clear image</li>
<!-- <li data-pwCommand="imageClear">Clear image</li> -->
<li data-pwCommand="imageSave">Save image</li>
</ul>

@ -1413,6 +1413,7 @@ pwlib.gui = function (app) {
button.type = "button";
button.classList.add('btn');
button.classList.add('blue');
button.classList.add('p-1');
button.appendChild(doc.createTextNode(button.title));
if (elem.firstChild) {

@ -1,268 +0,0 @@
{
// $Date: 2009-11-16 18:13:48 +0200 $
"errorInitBufferCanvas": "Error: adding the new buffer canvas element failed.",
"errorInitContext": "Error while initializing the canvas context.",
"errorElementNotFound": "Error: the following element was not found: {id}.",
"noComputedStyle": "Error: window.getComputedStyle is not available.",
"noXMLHttpRequest": "Error: window.XMLHttpRequest is not available.",
"errorInitCanvas": "Error: Canvas initialization failed.",
"noCanvasSupport": "Error: Your browser does not support Canvas.",
"failedConfigLoad": "Error: Failed loading the configuration.",
"failedLangLoad": "Error: Failed loading the language file.",
"failedMarkupLoad": "Error: Failed loading the interface markup file.",
"errorInitCommands": "Error: failed to initialize the PaintWeb commands!",
"noToolConfigured": "Error: you have no drawing tool configured to load!",
"imageLoadDifferentHost": "Warning: the configured image cannot be loaded because it is from a different domain.",
"toolRegisterFailed": "Error: failed to register tool '{id}'!",
"extensionRegisterFailed": "Error: failed to register extension '{id}'!",
"errorToolActivate": "Error: the tool you want could not be properly activated!",
"errorInitGUI": "Error: the interface failed to initialize!",
"failedSelectionCopy": "Error: failed to copy the selected pixels into memory.",
"noMainTabPanel": "Error: the interface layout has no tabbed panel with ID = main.",
"guiMarkupImportFailed": "Error: the interface markup code could not be imported into the main document.",
"guiMarkupParseFailed": "Error: the interface markup code could not be properly parsed.",
"missingViewport": "Error: the interface markup does not have the image viewport element.",
"missingViewportResizer": "Error: the interface markup does not have the image viewport resize handle.",
"missingCanvasResizer": "Error: the interface markup does not have the Canvas resize handle.",
"missingCanvasContainer": "Error: the interface markup does not have the Canvas container.",
"errorCpickerUnsupported": "Error: your browser does not implement the get/putImageData methods! The color picker tool cannot be used.",
"errorCbucketUnsupported": "Error: your browser does not implement the get/putImageData methods! The color bucket tool cannot be used.",
"errorClipboardUnsupported": "Error: your browser does not support get/putImageData! Clipboard operations like cut/copy/paste cannot be used.",
"errorTextUnsupported": "Error: your browser does not implement the Canvas Text API! The text tool cannot be used.",
"errorInsertimg": "The image could not be inserted. Maybe the address does not point to an image.",
"errorInsertimgHost": "The URL you provided points to a different host. The image cannot be added for security reasons.",
"errorInsertimgNotLoaded": "The image did not load yet, or the URL you provided does not point to an image.",
"promptInsertimg": "Type the address of the image you want to insert:",
"promptImageDimensions": "Please input the new image dimensions you want.",
"promptTextFont": "Type the name of the font you want:",
"errorImageSave": "The image cannot be saved!",
"guiCanvasResizer": "Resize the image canvas.",
"guiViewportResizer": "Resize the image viewport.",
"imageZoomTitle": "Zoom image (Use Up/Down Arrow key)",
"imageZoomLabel": "Zoom:",
"tabs": {
"main": {
"bcurve": "Bézier curve",
"ellipse": "Ellipse",
"eraser": "Eraser",
"line": "Line",
"main": "Main",
"pencil": "Pencil",
"polygon": "Polygon",
"rectangle": "Rectangle",
"selection": "Selection",
"shadow": "Shadow",
"text": "Text",
"textBorder": "Border"
},
"colormixer_inputs": {
"rgb": "RGB",
"rgbTitle": "sRGB: Standard Red, Green and Blue",
"hsv": "HSV",
"hsvTitle": "Hue, Saturation and Value",
"lab": "Lab",
"labTitle": "CIE Lab: Standard observer 2° D65",
"cmyk": "CMYK",
"cmykTitle": "Cyan, Magenta, Yellow and Key (Black)"
},
"colormixer_selector": {
"mixer": "Mixer",
"mixerTitle": "Color space visualisation",
"cpalettes": "Palettes",
"cpalettesTitle": "Predefined color palettes"
}
},
"floatingPanelMinimize": "Minimize",
"floatingPanelRestore": "Restore",
"floatingPanelClose": "Close",
"floatingPanels": {
"about": "About PaintWeb",
"colormixer": "Color mixer"
},
"tools": {
"cbucket": "Color bucket",
"cpicker": "Color picker",
"bcurve": "Bézier curve",
"hand": "Viewport drag",
"ellipse": "Ellipse",
"eraser": "Eraser",
"insertimg": "Insert image",
"line": "Line",
"pencil": "Pencil",
"polygon": "Polygon",
"rectangle": "Rectangle",
"selection": "Rectangle selection",
"text": "Text",
"textUnsupported": "The text tool is not supported by your browser."
},
"commands": {
"about": "About PaintWeb",
"clipboardPaste": "Paste clipboard",
"historyRedo": "Redo",
"historyUndo": "Undo",
"imageClear": "Clear image",
"imageSave": "Save image",
"imageRotate": "Rotate image",
"imageBright": "brighten image",
"imageDark": "darken image",
"selectionCopy": "Copy selection",
"selectionCrop": "Crop selection",
"selectionCut": "Cut selection",
"selectionDelete": "Delete selection",
"selectionFill": "Fill the selection"
},
"inputs": {
"line": {
"lineCap": "Line cap",
"lineCap_butt": "Butt",
"lineCap_round": "Round",
"lineCap_square": "Square",
"lineJoin": "Line join",
"lineJoin_bevel": "Bevel",
"lineJoin_miter": "Miter",
"lineJoin_round": "Round",
"lineWidth": "Line width:",
"miterLimit": "Miter limit:"
},
"shadow": {
"enable": "Enable shadows",
"enableTitle": "If checked, a shadow will render after each drawing operation you do.",
"shadowBlur": "Blur:",
"shadowOffsetX": "Distance X:",
"shadowOffsetY": "Distance Y:",
"shadowColor": "Color: ",
"shadowColorTitle": "Shadow color"
},
"selection": {
"transform": "Image manipulation",
"transformTitle": "If checked, the selected pixels will also be dragged/resized when you make changes to the selection. If unchecked, only the selection marquee will be dragged/resized - pixels will remain unaffected by any such changes.",
"transparent": "Transparent selection",
"transparentTitle": "If checked, the background will remain transparent. If unchecked, the background will be filled with the current fill color."
},
"text": {
"bold": "Bold",
"italic": "Italic",
"fontFamily": "Font family:",
"fontFamily_add": "Another font...",
"fontSize": "Font size:",
"textAlign": "Text alignment",
"left": "Left",
"center": "Center",
"right": "Right",
"textString_value": "Hello world!"
},
"shapeType": "Shape type",
"shapeType_both": "Both",
"shapeType_fill": "Fill",
"shapeType_stroke": "Stroke",
"pencilSize": "Pencil size:",
"eraserSize": "Eraser size:",
"borderWidth": "Border width:",
"fillStyle": "Fill ",
"fillStyleTitle": "Fill color",
"strokeStyle": "Stroke ",
"strokeStyleTitle": "Stroke color",
"colorInputAnchorContent": "Click to pick color"
},
"colormixer": {
"failedColorPaletteLoad": "Error: failed to load the color palette.",
"colorPalettes": {
"_saved": "Saved colors",
"anpa": "ANPA",
"dic": "DIC Color Guide",
"macos": "Mac OS",
"pantone-solid-coated": "PANTONE solid coated",
"toyo94": "TOYO 94 color finder",
"trumatch": "TRUMATCH colors",
"web": "Web safe",
"windows": "Windows"
},
"inputs": {
"hex": "Hex",
"alpha": "Alpha",
"hsv_hue": "Hue",
"hsv_sat": "Saturation",
"hsv_val": "Value",
"rgb_red": "Red",
"rgb_green": "Green",
"rgb_blue": "Blue",
"lab_cie_l": "Lightness",
"lab_cie_a": "a*",
"lab_cie_b": "b*",
"cmyk_cyan": "Cyan",
"cmyk_magenta": "Magenta",
"cmyk_yellow": "Yellow",
"cmyk_black": "Key / Black"
},
"buttons": {
"accept": "Accept",
"cancel": "Cancel",
"saveColor": "Save color",
"pickColor": "Pick color"
}
},
"status": {
"cbucketActive": "Click to start flood filling with the current fill color. Right click to use the stroke color for filling.",
"cpickerNormal": "Click to change the fill color, or Shift+Click to change the stroke color.",
"cpicker_fillStyle": "Click to pick the fill color.",
"cpicker_strokeStyle": "Click to pick the stroke color.",
"cpicker_shadow_shadowColor": "Click to pick the shadow color.",
"bcurveActive": "Click to start drawing the curve. You need four points: start, end and two control points.",
"bcurveControlPoint1": "Click to draw the first control point.",
"bcurveControlPoint2": "Click to draw the second control point. This will also end the drawing operation.",
"bcurveSnapping": "Hold the Shift key down for vertical/horizontal snapping.",
"handActive": "Click and drag the image to scroll.",
"ellipseActive": "Click and drag to draw an ellipse.",
"ellipseMousedown": "Hold the Shift key down to draw a circle.",
"eraserActive": "Click and drag to erase.",
"insertimgActive": "Waiting for the image to load...",
"insertimgLoaded": "Pick where you want to place the image. Click and drag to resize the image.",
"insertimgResize": "Hold the Shift key down to preserve the aspect ratio.",
"lineActive": "Click anywhere to start drawing a line.",
"lineMousedown": "Hold the Shift key down for vertical/horizontal snapping.",
"pencilActive": "Click and drag to draw.",
"polygonActive": "Click anywhere to start drawing a polygon.",
"polygonAddPoint": "Click to add another point to the polygon.",
"polygonEnd": "To end drawing the polygon simply click in the same place as the last point.",
"polygonMousedown": "Hold the Shift key down for vertical/horizontal snapping.",
"rectangleActive": "Click and drag to draw a rectangle.",
"rectangleMousedown": "Hold the Shift key down to draw a square.",
"selectionActive": "Click and drag to draw a selection.",
"selectionAvailable": "Drag or resize the selection. Hold the Control key down to toggle the transformation mode.",
"selectionDrag": "Hold the Shift key down for vertical/horizontal snapping.",
"selectionDraw": "Hold the Shift key down to draw a square selection.",
"selectionResize": "Hold the Shift key down to preserve the aspect ratio.",
"textActive": "Pick where you want to place the text. Make sure you adjust the properties as desired.",
"guiCanvasResizerActive": "Move the mouse to resize the image canvas."
},
// Moodle-related language strings
"moodle": {
"xhrRequestFailed": "The image save request failed.",
"jsonParseFailed": "Parsing the JSON result from the server failed!",
"imageSaveFailed": "The image save operation failed.",
"urlMismatch": "Image address mismatch!\nThe current image is {url}.\nThe server replied a successful save for {urlServer}.",
"errorSubmitUnsaved": "This image is not saved!"
},
"moodleServer": {
"permissionDenied": "Permission denied.",
"saveEmptyDataUrl": "Your request has no data URL.",
"proxyNotFound": "Could not find the PaintWeb image file proxy script.",
"malformedDataUrl": "The data URL is malformed.",
"failedMkdir": "Failed to create the PaintWeb images folder inside the Moodle data folder.",
"saveFailed": "Saving the image failed.",
"backingupImages": "Backing-up images saved with PaintWeb...",
"backupFailed": "An error occurred while copying images saved by PaintWeb."
}
// vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix ft=javascript:
}

@ -1,4 +1,4 @@
{
let lang_ko = {
// $Date: 2009-11-16 18:13:48 +0200 $
"errorInitBufferCanvas": "Error: adding the new buffer canvas element failed.",
@ -111,11 +111,12 @@
"imageRotate": "이미지 회전",
"imageBright": "밝게",
"imageDark": "어둡게",
"selectionCopy": "선택영역 복사",
"selectionCrop": "선택영역만 자르기",
"selectionCrop": "자르기",
"selectionFill": "가림막",
"selectionCopy": "번호판",
"selectionCut": "선택영역 잘라내기",
"selectionDelete": "선택영역 삭제",
"selectionFill": "선택영역 채우기"
"selectionDelete": "선택영역 삭제"
},
"inputs": {
@ -265,4 +266,4 @@
}
// vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix ft=javascript:
}
};

@ -1,4 +1,4 @@
{
let paintweb_config = {
// $Date: 2009-11-08 19:54:46 +0200 $
"languages": {
@ -119,7 +119,7 @@
* @type CSS3Color-rgba functional notation
* @default "rgba(0,0,0,1)"
*/
"fillStyle": "rgba(0,0,255,1)",
"fillStyle": "rgba(255,255,255,1)",
/**
* Default stroke style.
@ -214,7 +214,7 @@
*/
/*FIXME: 항목수정*/
/*"tools": ["bcurve", "cbucket", "cpicker", "ellipse", "eraser", "hand", "insertimg", "line", "pencil", "polygon", "rectangle", "selection", "text"],*/
"tools": ["rectangle", "selection"],
"tools": ["selection"],
/**
@ -611,34 +611,35 @@
"Control Z": { "command": "historyUndo" },
"Control Y": { "command": "historyRedo" },
"Control N": { "command": "imageClear" },
"Control S": { "command": "imageSave" },
// "Control N": { "command": "imageClear" },
"Control A": { "command": "selectAll" },
"Control X": { "command": "selectionCut" },
"Shift Delete": { "command": "selectionCut" },
"Control C": { "command": "selectionCopy" },
"Control V": { "command": "clipboardPaste" },
//"Control A": { "command": "selectAll" },
//"Control X": { "command": "selectionCut" },
//"Shift Delete": { "command": "selectionCut" },
//"Control C": { "command": "selectionCopy" },
//"Control V": { "command": "clipboardPaste" },
"Control S": { "command": "imageSave" }
// Use "toolActivate": "id" to activate the tool with the given ID.
"C": { "toolActivate": "cpicker" },
"E": { "toolActivate": "ellipse" },
"F": { "toolActivate": "cbucket" },
"G": { "toolActivate": "polygon" },
"H": { "toolActivate": "hand" },
"I": { "toolActivate": "insertimg" },
"L": { "toolActivate": "line" },
"O": { "toolActivate": "eraser" },
"P": { "toolActivate": "pencil" },
"R": { "toolActivate": "rectangle" },
"S": { "toolActivate": "selection" },
"T": { "toolActivate": "text" },
"V": { "toolActivate": "bcurve" },
//"C": { "toolActivate": "cpicker" },
//"E": { "toolActivate": "ellipse" },
//"F": { "toolActivate": "cbucket" },
//"G": { "toolActivate": "polygon" },
//"H": { "toolActivate": "hand" },
//"I": { "toolActivate": "insertimg" },
//"L": { "toolActivate": "line" },
//"O": { "toolActivate": "eraser" },
//"P": { "toolActivate": "pencil" },
//"R": { "toolActivate": "rectangle" },
//"S": { "toolActivate": "selection" },
//"T": { "toolActivate": "text" },
//"V": { "toolActivate": "bcurve" },
// Miscellaneous commands.
"X": { "command": "swapFillStroke" },
"F1": { "command": "about" }
// "X": { "command": "swapFillStroke" },
//"F1": { "command": "about" }
}
// vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix ft=javascript:
}
};

@ -527,11 +527,6 @@ function PaintWeb (win, doc) {
return false;
}
if (!this.config.configFile) {
this.initError(lang.noConfigFile);
return false;
}
if (typeof this.config.guiPlaceholder !== 'object' ||
this.config.guiPlaceholder.nodeType !== this.ELEMENT_NODE) {
this.initError(lang.guiPlaceholderWrong);
@ -638,8 +633,7 @@ function PaintWeb (win, doc) {
* XMLHttpRequest object.
*/
this.configLoad = function () {
pwlib.xhrLoad(PaintWeb.baseFolder + this.config.configFile,
this.configReady);
this.configReady();
};
/**
@ -662,16 +656,8 @@ function PaintWeb (win, doc) {
* 3 INTERACTIVE Downloading, responseText holds the partial data.
* 4 COMPLETED Finished with all operations.
*/
if (!xhr || xhr.readyState !== 4) {
return;
}
if ((xhr.status !== 304 && xhr.status !== 200) || !xhr.responseText) {
_self.initError(lang.failedConfigLoad);
return;
}
var config = pwlib.jsonParse(xhr.responseText);
var config = paintweb_config;
pwlib.extend(_self.config, config);
_self.langLoad();
@ -689,21 +675,7 @@ function PaintWeb (win, doc) {
* XMLHttpRequest object.
*/
this.langLoad = function () {
var id = this.config.lang,
file = PaintWeb.baseFolder;
// If the language is not available, always fallback to English.
if (!(id in this.config.languages)) {
id = this.config.lang = 'en';
}
if ('file' in this.config.languages[id]) {
file += this.config.languages[id].file;
} else {
file += this.config.langFolder + '/' + id + '.json';
}
pwlib.xhrLoad(file, this.langReady);
this.langReady();
};
/**
@ -717,17 +689,9 @@ function PaintWeb (win, doc) {
* @see PaintWeb#langLoad The method which issues the XMLHttpRequest request
* for loading the language file.
*/
this.langReady = function (xhr) {
if (!xhr || xhr.readyState !== 4) {
return;
}
if ((xhr.status !== 304 && xhr.status !== 200) || !xhr.responseText) {
_self.initError(lang.failedLangLoad);
return;
}
this.langReady = function () {
pwlib.extend(_self.lang, pwlib.jsonParse(xhr.responseText));
pwlib.extend(_self.lang, lang_ko);
if (_self.initCanvas() && _self.initContext()) {
// Start GUI load now.
@ -751,13 +715,13 @@ function PaintWeb (win, doc) {
this.commandRegister('selectionCrop', this.selectionCrop) &&
this.commandRegister('selectionFill', this.selectionFill) &&
//this.commandRegister('selectionCut', this.selectionCut) &&
//this.commandRegister('selectionCopy', this.selectionCopy) &&
this.commandRegister('selectionCopy', this.selectionCopy) &&
//this.commandRegister('clipboardPaste', this.clipboardPaste) &&
this.commandRegister('imageSave', this.imageSave) &&
this.commandRegister('imageRotate', this.imageRotate) &&
this.commandRegister('imageBright', this.imageBright) &&
this.commandRegister('imageDark', this.imageDark) &&
this.commandRegister('imageClear', this.imageClear) &&
//this.commandRegister('imageClear', this.imageClear) &&
this.commandRegister('swapFillStroke', this.swapFillStroke) &&
this.commandRegister('imageZoomIn', this.imageZoomIn) &&
this.commandRegister('imageZoomOut', this.imageZoomOut) &&
@ -2661,6 +2625,7 @@ function PaintWeb (win, doc) {
imageLoad = _self.config.imageLoad,
ext = 'png', idata = null, src = null, pos;
if (!canvas.toDataURL) {
return false;
}
@ -2714,34 +2679,20 @@ function PaintWeb (win, doc) {
}
canvas = null;
// alert('idata~~~'+idata)
if (!idata || idata === 'data:,') {
return false;
}
//--------------------------------------------------------------------
// FIXME: 변경된 부분 : save image
//--------------------------------------------------------------------
if (!_self.config.imageSave) {
if (_self.config.afterImageSave) _self.config.afterImageSave();
return;
}
let fileType = 'image/';
const regx = new RegExp('.(gif|jpg|jpeg|tiff|png|ico)$', 'i')
let name = (/[^(/|\\)]*$/).exec(idata)[0]
// 20220915_5df30439017240afbc7081ae9bfbfa2f_e 와 같은 형태인 경우 imageName으로
// 원본파일명 + '_e'
if(!regx.exec(name)){
const imgName = srcImg.name;
const idx = imgName.indexOf('.');
const regx = new RegExp('.(gif|jpg|jpeg|tiff|png|ico)$', 'i');
let name = originalInfomation.FILE_NM;;
// 삭제가 아닌 경우 원본이미지명 + '_e' 추가
if(img.width !== 0){
name = imgName.substring(0, idx)+'_e'+ imgName.substring(idx);
}
if(regx.test(name)){
fileType += regx.exec(name)[0].replace('.', '');
} else {
fileType += 'jpg';
}
fileType += regx.test(name) ? regx.exec(name)[0].replace('.', '') : 'jpg'
// mine type 'jpg' > jpeg로 변경
fileType = fileType.replace('image/jpg', 'image/jpeg');
const bstr = atob(idata.split(",")[1]);
@ -2755,7 +2706,7 @@ function PaintWeb (win, doc) {
// 이미지 삭제인 경우 img.width, img.height 가 0
_self.config.imageSave(file, img.width, img.height, doc, _self);
//_self.config.afterImageSave();
return;
//---------------------------------------------------------------------

Loading…
Cancel
Save