웹에서 signature_pad.js 사용해서 서명받기 예제
Javascript 2015. 12. 7. 16:11
Signature Pad : https://github.com/szimek/signature_pad
Demo 사이트 : http://szimek.github.io/signature_pad/
요기에 가보면 어떤 머리좋고 착한 사람이 웹에서 사인을 할 수 있도록 지원해주는 js 를 맨들어 놓고 설명을 해 주고 있다.
웹에서 사인한 이미지를 php 을 사용해서 png 이미지 파일을 생성하는 예제는 있는데 Java 예제는 없어서 Java 로 하는걸 살짝 맹글어 보았다.
뭐 별건 아니고 BASE64 로 인코딩된 문자열을 다시 디코딩해서 png 파일로 맨드는것만 하면 된다.
보다 쉬운 편의를 위해서 Apache Commons 프로젝트에 있는 라이브러리 몇개(lang, io, codec)를 가져다 썼다.
maven 을 사용하는 사람들은 디펜던시에 요걸 추가해 주면 되고 아니면 그냥 commons.apache.org 에 가서 다운로드 받으면 된다.
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.10</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.4</version>
</dependency>
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::: 사인패드 테스트 :::</title>
<script src="${pageContext.request.contextPath}/resources/js/jquery-1.11.3.min.js" type="text/javascript">
</script>
<script src="${pageContext.request.contextPath}/resources/js/signature_pad.min.js" type="text/javascript">
</script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/css.css">
</head>
<body>
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="description">사인해 주세요~</div>
<button type="button" class="button clear" data-action="clear">지우기</button>
<button type="button" class="button save" data-action="save">저장</button>
</div>
</div>
<script>
var canvas = $("#signature-pad canvas")[0];
var sign = new SignaturePad(canvas, {
minWidth: 5,
maxWidth: 10,
penColor: "rgb(66, 133, 244)"
});
$("[data-action]").on("click", function(){
if ( $(this).data("action")=="clear" ){
sign.clear();
}
else if ( $(this).data("action")=="save" ){
if (sign.isEmpty()) {
alert("사인해 주세요!!");
} else {
$.ajax({
url : "save.jsp",
method : "post",
dataType : "json",
data : {
sign : sign.toDataURL()
},
success : function(r){
alert("저장완료 : " + r.filename);
sign.clear();
},
error : function(res){
console.log(res);
}
});
}
}
});
function resizeCanvas(){
var canvas = $("#signature-pad canvas")[0];
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
$(window).on("resize", function(){
resizeCanvas();
});
resizeCanvas();
</script>
</body>
</html>
save.jsp
잠깐 테스트로 예제를 작성하는것이기 때문에 Controller 없이 그냥 jsp 로 맨들어 보았다.
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@page import="org.apache.commons.codec.binary.Base64"%>
<%@page import="org.apache.commons.io.FileUtils"%>
<%@page import="org.apache.commons.lang3.StringUtils"%>
<%@page import="java.io.File"%>
<%
String sign = StringUtils.split(request.getParameter("sign"), ",")[1];
String fileName = "sign"+System.currentTimeMillis()+".png";
FileUtils.writeByteArrayToFile(new File("d:\\"+fileName), Base64.decodeBase64(sign));
%>
{
"filename" : "<%= fileName %>"
}
예제 프로젝트 다운로드
JavascriptSignature.zip'Javascript' 카테고리의 다른 글
| 네이버맵 : clientId와 웹 서비스 url을 확인해주시기 바랍니다. 메시지가 나올때 (0) | 2017.02.14 |
|---|---|
| jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때 (0) | 2012.11.08 |
| Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기 (0) | 2012.05.30 |
| Javascript 숫자에 천단위로 콤마(,) 찍기 (1) | 2011.11.29 |
| 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기 (2) | 2011.11.14 |
