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