feat: 이미지에디터 진행
parent
8bec6d0aa4
commit
9d3f7ccf05
@ -1,99 +0,0 @@
|
|||||||
package kr.xit.framework.biz.cmm;
|
|
||||||
|
|
||||||
import java.io.File;
|
|
||||||
import java.io.FileInputStream;
|
|
||||||
import java.io.IOException;
|
|
||||||
import java.io.OutputStream;
|
|
||||||
import java.io.UnsupportedEncodingException;
|
|
||||||
import java.net.URLEncoder;
|
|
||||||
import java.text.SimpleDateFormat;
|
|
||||||
import java.util.Date;
|
|
||||||
|
|
||||||
import javax.servlet.http.HttpServletResponse;
|
|
||||||
|
|
||||||
import org.springframework.web.multipart.MultipartFile;
|
|
||||||
|
|
||||||
public class FileUtil {
|
|
||||||
|
|
||||||
public void makeBasePath(String path) {
|
|
||||||
File dir = new File(path);
|
|
||||||
if (!dir.exists()) {
|
|
||||||
dir.mkdirs();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public String saveFile(MultipartFile file, String basePath, String fileName){
|
|
||||||
if (file == null || file.getName().equals("") || file.getSize() < 1) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
makeBasePath(basePath);
|
|
||||||
String serverFullPath = basePath + fileName;
|
|
||||||
|
|
||||||
File file1 = new File(serverFullPath);
|
|
||||||
try {
|
|
||||||
file.transferTo(file1);
|
|
||||||
} catch (IllegalStateException ex) {
|
|
||||||
System.out.println("IllegalStateException: " + ex.toString());
|
|
||||||
} catch (IOException ex) {
|
|
||||||
System.out.println("IOException: " + ex.toString());
|
|
||||||
}
|
|
||||||
|
|
||||||
return serverFullPath;
|
|
||||||
}
|
|
||||||
|
|
||||||
public String getNewName() {
|
|
||||||
SimpleDateFormat ft = new SimpleDateFormat("yyyyMMddhhmmssSSS");
|
|
||||||
return ft.format(new Date()) + (int) (Math.random() * 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
public String getFileExtension(String filename) {
|
|
||||||
Integer mid = filename.lastIndexOf(".");
|
|
||||||
return filename.substring(mid, filename.length());
|
|
||||||
}
|
|
||||||
|
|
||||||
public String getRealPath(String path, String filename) {
|
|
||||||
return path + filename.substring(0,4) + "/";
|
|
||||||
}
|
|
||||||
|
|
||||||
public void fileDownload(HttpServletResponse response, String path, String filename) {
|
|
||||||
String realPath = "";
|
|
||||||
|
|
||||||
try {
|
|
||||||
filename = URLEncoder.encode(filename, "UTF-8");
|
|
||||||
} catch (UnsupportedEncodingException ex) {
|
|
||||||
System.out.println("UnsupportedEncodingException");
|
|
||||||
}
|
|
||||||
|
|
||||||
realPath = path + filename;
|
|
||||||
|
|
||||||
File file1 = new File(realPath);
|
|
||||||
if (!file1.exists()) {
|
|
||||||
return ;
|
|
||||||
}
|
|
||||||
|
|
||||||
response.setHeader("Content-Disposition", "attachment; filename=\""+filename+"\"");
|
|
||||||
response.setContentType("application/octet-stream;");
|
|
||||||
response.setHeader("Pragma", "no-cache");
|
|
||||||
response.setHeader("Cache-Control", "no-cache, must-revalidate");
|
|
||||||
response.setDateHeader("Expires", 0);
|
|
||||||
|
|
||||||
try {
|
|
||||||
OutputStream os = response.getOutputStream();
|
|
||||||
FileInputStream fis = new FileInputStream(realPath);
|
|
||||||
|
|
||||||
int ncount = 0;
|
|
||||||
|
|
||||||
byte[] bytes = new byte[512];
|
|
||||||
|
|
||||||
while((ncount = fis.read(bytes)) != -1 ) {
|
|
||||||
os.write(bytes, 0, ncount);
|
|
||||||
}
|
|
||||||
|
|
||||||
fis.close();
|
|
||||||
os.close();
|
|
||||||
} catch (IOException e) {
|
|
||||||
e.printStackTrace();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
package kr.xit.framework.biz.cmm;
|
|
||||||
|
|
||||||
import java.io.DataOutputStream;
|
|
||||||
import java.io.FileOutputStream;
|
|
||||||
import java.io.IOException;
|
|
||||||
|
|
||||||
import javax.servlet.http.HttpServletRequest;
|
|
||||||
import javax.servlet.http.HttpServletResponse;
|
|
||||||
|
|
||||||
import org.springframework.stereotype.Controller;
|
|
||||||
import org.springframework.web.bind.annotation.RequestMapping;
|
|
||||||
import org.springframework.web.bind.annotation.RequestMethod;
|
|
||||||
import org.springframework.web.multipart.MultipartFile;
|
|
||||||
|
|
||||||
import sun.misc.BASE64Decoder;
|
|
||||||
|
|
||||||
@Controller
|
|
||||||
public class ImageEditor{
|
|
||||||
//private String filePath = "c:/users/xitdev/temp";
|
|
||||||
private String filePath = "/Users/minuk/temp";
|
|
||||||
|
|
||||||
@RequestMapping(value = "/imageEditor")
|
|
||||||
public String imageEditor() {
|
|
||||||
|
|
||||||
return "imageEditor";
|
|
||||||
}
|
|
||||||
|
|
||||||
@RequestMapping(value = "/fileUpload")
|
|
||||||
public void fileUpload(HttpServletResponse response, MultipartFile upfile) {
|
|
||||||
if(upfile==null) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
FileUtil fu = new FileUtil();
|
|
||||||
String filename = fu.getNewName();
|
|
||||||
fu.saveFile(upfile, filePath, filename );
|
|
||||||
response.getWriter().print(filename);
|
|
||||||
} catch (Exception ex) {
|
|
||||||
System.out.println("File Upload Error");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@RequestMapping(value = "/fileDownload")
|
|
||||||
public void fileDownload(HttpServletResponse response, String filename) {
|
|
||||||
FileUtil fu = new FileUtil();
|
|
||||||
fu.fileDownload(response, filePath, filename );
|
|
||||||
}
|
|
||||||
|
|
||||||
@RequestMapping(value = "/saveImage", method = RequestMethod.POST)
|
|
||||||
public void saveImage(HttpServletRequest request, MultipartFile imageFile) {
|
|
||||||
String filename = filePath +"/"+ request.getParameter("filename");
|
|
||||||
|
|
||||||
try {
|
|
||||||
byte[] Filebyte = imageFile.getBytes();
|
|
||||||
imageFile.getInputStream().read(Filebyte);
|
|
||||||
|
|
||||||
String encString = new String(Filebyte, "ASCII");
|
|
||||||
encString = encString.replace("data:image/png;base64,", "");
|
|
||||||
|
|
||||||
FileOutputStream fs = new FileOutputStream(filename);
|
|
||||||
DataOutputStream ds = new DataOutputStream(fs);
|
|
||||||
|
|
||||||
BASE64Decoder decoder = new BASE64Decoder();
|
|
||||||
byte[] data = decoder.decodeBuffer(encString);
|
|
||||||
|
|
||||||
for (byte dataB : data) {
|
|
||||||
ds.writeByte(dataB);
|
|
||||||
}
|
|
||||||
ds.close();
|
|
||||||
fs.close();
|
|
||||||
} catch (IOException e) {
|
|
||||||
System.out.println("IOException Error");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,390 @@
|
|||||||
|
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||||
|
<%@ include file="/WEB-INF/jsp/framework/taglibs.jsp" %>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div.draggable {
|
||||||
|
float: left;
|
||||||
|
padding: 10px 0 0 20px;
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
/*background:url(/resources/framework/images/common/clip.png) no-repeat 0 0;*/
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
div.invert {
|
||||||
|
/*background:url(/resources/framework/images/common/noImage.png) no-repeat 0 0;*/
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<c:set var="bizName" value="주민 신고 데이타"/>
|
||||||
|
|
||||||
|
<div class="popup" style="min-width: 100px;">
|
||||||
|
<div class="popup_inner" style="max-width: 1000px;">
|
||||||
|
<p class="pop_title">
|
||||||
|
<c:out value="${bizName}"/>(<c:out value="${reqDTO.interfaceSeqN}"/>) 상세
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form name="frmStmt">
|
||||||
|
<table class="tbl03">
|
||||||
|
<caption><c:out value="${bizName}"/> 상세</caption>
|
||||||
|
<colgroup>
|
||||||
|
<col style="width: 13%;"/>
|
||||||
|
<col style="width: 20%;"/>
|
||||||
|
<col style="width: 13%;"/>
|
||||||
|
<col style="width: 20%;"/>
|
||||||
|
<col style="width: 13%;"/>
|
||||||
|
<col style="width: 20%;"/>
|
||||||
|
</colgroup>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>기관코드</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="insttCode" value='<c:out value="${ctznStmtDTO.insttCode}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>시스템코드</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="sysCode" value='<c:out value="${ctznStmtDTO.sysCode}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>민원구분</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="cvplSe" value='<c:out value="${ctznStmtDTO.cvplSe}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>민원신청번호</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="petiAncCodeV" value='<c:out value="${ctznStmtDTO.cvplReqstNo}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>민원접수번호</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="petiNoC" value='<c:out value="${ctznStmtDTO.cvplRceptNo}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>민원신청인명</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="civilNoC" value='<c:out value="${ctznStmtDTO.cvplApplcntNm}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>신청인이메일</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="peterNameV" value='<c:out value="${ctznStmtDTO.cvplApplcntEmailAdres}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>신청인우편번호</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="zipCodeC" value='<c:out value="${ctznStmtDTO.cvplApplcntZip}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>신청인주소</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="addressV" value='<c:out value="${ctznStmtDTO.cvplApplcntAdres}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>신청인핸드폰</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="celNoV" value='<c:out value="${ctznStmtDTO.cvplApplcntMoblphonNo}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>신청인전화</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="telNoV" value='<c:out value="${ctznStmtDTO.cvplApplcntTlphonNo}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>처리상태</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="telNoV" value='<c:out value="${ctznStmtDTO.ctznSttemntProcessSttus}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>민원신청제목</th>
|
||||||
|
<td colspan="5">
|
||||||
|
<input type="text" name="petiTitleV" value='<c:out value="${ctznStmtDTO.cvplReqstSj}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>민원신청내용</th>
|
||||||
|
<td colspan="5">
|
||||||
|
<textarea name="petiReasonL" rows="10" readonly><c:out value="${ctznStmtDTO.cvplReqstCn}" /></textarea>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>민원신청일시</th>
|
||||||
|
<td>
|
||||||
|
<fmt:parseDate value="${ctznStmtDTO.cvplRceptDt}" var="cvplRceptDt" pattern="yyyyMMddHHmmss"/>
|
||||||
|
<input type="text" name="cvplRceptDt" value='<fmt:formatDate value="${cvplRceptDt}" pattern="yyyy-MM-dd HH:mm:ss"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>민원처리기간</th>
|
||||||
|
<td>
|
||||||
|
<fmt:parseDate value="${ctznStmtDTO.cvplProcessPd}" var="cvplProcessPd" pattern="yyyyMMddHHmmss"/>
|
||||||
|
<input type="text" name="cvplProcessPd" value='<fmt:formatDate value="${cvplProcessPd}" pattern="yyyy-MM-dd HH:mm:ss"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>민원등록일시</th>
|
||||||
|
<td>
|
||||||
|
<fmt:parseDate value="${ctznStmtDTO.cvplRegistDt}" var="cvplRegistDt" pattern="yyyyMMddHHmmss"/>
|
||||||
|
<input type="text" name="cvplRegistDt" value='<fmt:formatDate value="${cvplRegistDt}" pattern="yyyy-MM-dd HH:mm:ss"/>' readonly>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<%-- <tr>--%>
|
||||||
|
<%-- <th>등록일시</th>--%>
|
||||||
|
<%-- <td>--%>
|
||||||
|
<%-- <fmt:parseDate value="${ctznStmtDTO.registDt}" var="registDt" pattern="yyyyMMddHHmmss"/>--%>
|
||||||
|
<%-- <input type="text" name="registDt" value="<fmt:formatDate value="${registDt}" pattern="yyyy-MM-dd HH:mm:ss"/>' readonly>--%>
|
||||||
|
<%-- </td>--%>
|
||||||
|
<%-- <th>등록인</th>--%>
|
||||||
|
<%-- <td>--%>
|
||||||
|
<%-- <input type="text" name="sendYnC" value='<c:out value="${ctznStmtDTO.register}"/>' readonly>--%>
|
||||||
|
<%-- </td>--%>
|
||||||
|
<%-- </tr>--%>
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<form name="frmStmtDtl">
|
||||||
|
<c:forEach var="dtlDTO" items="${ctznStmtDtlDTOs}" varStatus="status">
|
||||||
|
|
||||||
|
<table class="tbl03">
|
||||||
|
<caption><c:out value="${bizName}"/> 상세</caption>
|
||||||
|
<colgroup>
|
||||||
|
<col style="width: 13%;"/>
|
||||||
|
<col style="width: 20%;"/>
|
||||||
|
<col style="width: 13%;"/>
|
||||||
|
<col style="width: 20%;"/>
|
||||||
|
<col style="width: 13%;"/>
|
||||||
|
<col style="width: 20%;"/>
|
||||||
|
</colgroup>
|
||||||
|
<tbody>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<th>순번</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="ctznSttemntDetailSn" value='<c:out value="${dtlDTO.ctznSttemntDetailSn}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>차량번호</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="vhcleNo" value='<c:out value="${dtlDTO.vhcleNo}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>단속ID</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="cvplSe" value='<c:out value="${dtlDTO.regltId}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>단속일시</th>
|
||||||
|
<td>
|
||||||
|
<fmt:parseDate value="${dtlDTO.regltDeTime}" var="regltDeTimet" pattern="yyyyMMddHHmmss"/>
|
||||||
|
<input type="text" name="regltDeTime" value='<fmt:formatDate value="${regltDeTime}" pattern="yyyy-MM-dd HH:mm:ss"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>단속장소</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="petiNoC" value='<c:out value="${dtlDTO.regltPlace}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>위반내역</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="civilNoC" value='<c:out value="${dtlDTO.violtDtlsNm}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>GPS위도</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="peterNameV" value='<c:out value="${dtlDTO.gpsX}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>GPS경도</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="zipCodeC" value='<c:out value="${dtlDTO.gpsY}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>기관코드</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="addressV" value='<c:out value="${dtlDTO.insttCode}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>과태료코드</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="celNoV" value='<c:out value="${dtlDTO.sysCode}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>처리상태</th>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="telNoV" value='<c:out value="${dtlDTO.ctznSttemntDetailProcessSttus}"/>' readonly>
|
||||||
|
</td>
|
||||||
|
<th>등록일시</th>
|
||||||
|
<td>
|
||||||
|
<fmt:parseDate value="${dtlDTO.registDt}" var="registDt" pattern="yyyyMMddHHmmss"/>
|
||||||
|
<input type="text" name="registDt" value='<fmt:formatDate value="${registDt}" pattern="yyyy-MM-dd HH:mm:ss"/>' readonly>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</c:forEach>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="draggable">
|
||||||
|
<p>title</p>
|
||||||
|
</div>
|
||||||
|
<div class="draggable">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor<br>
|
||||||
|
sit amet, consecte<br>turlit.
|
||||||
|
Aenean
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="draggable">
|
||||||
|
<p>Drag me around</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<%-- TODO: id 고정(변경불가)--%>
|
||||||
|
<div id="imgList" class="draggable">
|
||||||
|
<%-- <c:forEach var="dtlDTO" items="${ctznStmtDtlDTOs}" varStatus="status">--%>
|
||||||
|
<%-- <div id="${dtlDTO.insterfaceSeqN}0${status.index+1}">--%>
|
||||||
|
|
||||||
|
<%-- </div>--%>
|
||||||
|
<%-- </c:forEach>--%>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div style="min-height: 260px">
|
||||||
|
<img id="uploadImage"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="popup_btn">
|
||||||
|
<span class="flr p_flr">
|
||||||
|
<a href="#" class="btn lightgray" onclick="window.close()">닫기</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<!-- //등록버튼 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- //popup -->
|
||||||
|
|
||||||
|
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/framework/js/cmm/cmmDownloadImg.js" defer></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
/**************************************************************************
|
||||||
|
* Global Variable
|
||||||
|
**************************************************************************/
|
||||||
|
// let orgData;
|
||||||
|
var imageEditorPopup = (flag, params) => fnBiz.pagePopup(flag, params);
|
||||||
|
var callbackReloadImage = () => fnBiz.downloadImg();
|
||||||
|
|
||||||
|
|
||||||
|
/* *******************************
|
||||||
|
* Biz function
|
||||||
|
******************************* */
|
||||||
|
const fnBiz = {
|
||||||
|
downloadImg: () => {
|
||||||
|
|
||||||
|
//ctznStmtDtlDTO
|
||||||
|
|
||||||
|
cmmAjax({
|
||||||
|
showSuccessMsg: false
|
||||||
|
,url: '<c:url value="/fims/biz/ec/findNatlNewspaperAttchFiles.do"/>'
|
||||||
|
,data: {interfaceSeqN: '${reqDTO.interfaceSeqN}'}
|
||||||
|
,success: (res) => {
|
||||||
|
// 이미지 클릭시 image editor open
|
||||||
|
const pr = {
|
||||||
|
interfaceSeqN: '${reqDTO.interfaceSeqN}',
|
||||||
|
ctznSttemntDetailSn: '${reqDTO.ctznSttemntDetailSn}'
|
||||||
|
}
|
||||||
|
<%-- TODO: id 고정(#ctznImg - 변경불가)--%>
|
||||||
|
sttemntImgDownload(res.data?.contents, '#ctznImg', pr, true);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
,pagePopup: function(flag, params) {
|
||||||
|
let url;
|
||||||
|
let popTitle;
|
||||||
|
let popOption;
|
||||||
|
switch (flag) {
|
||||||
|
case "imageEditor":
|
||||||
|
url = '<c:url value="/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.do"/>';
|
||||||
|
popOption = {width: 1000, height: 800, resizable:false,scrollbars:'no'};
|
||||||
|
popTitle = "이미지 에디터";
|
||||||
|
break;
|
||||||
|
case "imageView":
|
||||||
|
url = '<c:url value="/framework/biz/cmm/file/cmmImageViewPopup.do"/>';
|
||||||
|
popOption = {width: 1000, height: 800, resizable:false,scrollbars:'no'};
|
||||||
|
popTitle = "이미지 보기";
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
window.opener.popup = CmmPopup.open(url, params, popOption, popTitle);
|
||||||
|
//var w = window.open("/imageEditor.do", "", "width=800,height=650,top=0px,left=200px,status=,resizable=false,scrollbars=no");
|
||||||
|
}
|
||||||
|
,viewImg: () => {
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**************************************************************************
|
||||||
|
* event
|
||||||
|
**************************************************************************/
|
||||||
|
$(() => {
|
||||||
|
$('img').on('click', () => {
|
||||||
|
fnBiz.viewImg()
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**************************************************************************
|
||||||
|
* initialize
|
||||||
|
**************************************************************************/
|
||||||
|
$(document).ready(function () {
|
||||||
|
// orgData = $('form').serialize();
|
||||||
|
fnBiz.downloadImg();
|
||||||
|
// $( '#imgList' ).draggable({
|
||||||
|
// scroll : false,
|
||||||
|
// containment : 'parent', //부모 요소 안에서만 이동 범위 제한
|
||||||
|
// handle : '.header' // drag 대상 안 특정 요소에 제한 (여러개 사용 가능)
|
||||||
|
// });
|
||||||
|
|
||||||
|
//$( "#imgList" ).draggable({ revert: true });
|
||||||
|
//$( "#imgList" ).draggable({ revert: true, helper: "clone" });
|
||||||
|
|
||||||
|
$(".draggable").draggable({
|
||||||
|
//이동영역 제한
|
||||||
|
// drag 가로 세로 이동 제한
|
||||||
|
//,axis: "x" // 가로로만 이동 가능
|
||||||
|
//,axis: "y" // 세로로만 이동 가능
|
||||||
|
//containment:"#imgList"
|
||||||
|
|
||||||
|
cursor:"move"
|
||||||
|
,stack:".draggable"
|
||||||
|
,opacity:0.7
|
||||||
|
,create : function(event, ui) { //생성시 발생하는 이벤트
|
||||||
|
console.log("dragcreat event!");
|
||||||
|
console.log("index:"+$(this).index());
|
||||||
|
}
|
||||||
|
,start: function(event, ui ) {
|
||||||
|
//드래그를 시작했을때 이벤트 발생
|
||||||
|
const currentObj = $(".ui-draggable-dragging"); //현재 드래그 중인 엘리먼트 가져오기
|
||||||
|
console.log(currentObj)
|
||||||
|
}
|
||||||
|
,drop : function( event, ui ){
|
||||||
|
//droppable 영역안으로 드롭했을 때 이벤트 발생
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//$( ".drag1" ).draggable("destroy"); // drag1 더이상 드래그 못하도록 하기
|
||||||
|
|
||||||
|
$(".draggable").bind("dragstart", function(event, ui) {
|
||||||
|
console.log("dragstart event!");
|
||||||
|
$(this).addClass("invert"); //클래스 추가
|
||||||
|
|
||||||
|
});
|
||||||
|
$(".draggable").bind("dragstop", function(event, ui) {
|
||||||
|
console.log("dragstop event!");
|
||||||
|
$(this).removeClass("invert"); //클래스 제거
|
||||||
|
});
|
||||||
|
$(".draggable").bind("drag", function(event, ui) {
|
||||||
|
console.log("drags event!");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
||||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
|
||||||
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
||||||
<title>PaintWeb</title>
|
|
||||||
<script type="text/javascript" src="/resources/3rd-party/paintweb/paintweb.js"></script>
|
|
||||||
<script type="text/javascript" src="/resources/3rd-party/paintweb/html2canvas.min.js"></script>
|
|
||||||
<script type="text/javascript" src="/resources/3rd-party/paintweb/es6-promise.min.js"></script>
|
|
||||||
<script type="text/javascript" src="/resources/3rd-party/paintweb/es6-promise.auto.min.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<img id="editableImage"/>
|
|
||||||
|
|
||||||
<div id="PaintWebTarget"></div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
var srcImg = null, img1 =null;
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
srcImg = window.opener.document.getElementById("uploadImage");
|
|
||||||
|
|
||||||
img1 = document.getElementById('editableImage');
|
|
||||||
alert(srcImg.src)
|
|
||||||
console.log(srcImg)
|
|
||||||
img1.src = srcImg.src;
|
|
||||||
img1.onload = function () {
|
|
||||||
initEditor();
|
|
||||||
img1.style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
// // img1 = document.getElementById('editableImage');
|
|
||||||
// // alert(srcImg.src)
|
|
||||||
// // console.log(srcImg)
|
|
||||||
// // img1.src = srcImg.src;
|
|
||||||
// srcImg.onload = function () {
|
|
||||||
// initEditor();
|
|
||||||
// srcImg.style.display = 'none';
|
|
||||||
// }
|
|
||||||
|
|
||||||
})();
|
|
||||||
|
|
||||||
function initEditor() {
|
|
||||||
var target = document.getElementById('PaintWebTarget'),
|
|
||||||
pw = new PaintWeb();
|
|
||||||
pw.config.guiPlaceholder = target;
|
|
||||||
pw.config.configFile = 'paintweb-config.json';
|
|
||||||
pw.config.imageLoad = img1;
|
|
||||||
//pw.config.imageLoad = srcImg;
|
|
||||||
|
|
||||||
pw.config.imageSaveURL = "/saveImage.do"; // imageSave == image upload
|
|
||||||
pw.config.imageDownloadURL = "/fileDownload.do";
|
|
||||||
pw.config.afterImageSave = afterImageSave;
|
|
||||||
pw.init();
|
|
||||||
}
|
|
||||||
|
|
||||||
function afterImageSave(){
|
|
||||||
window.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Loading…
Reference in New Issue