[JSignature] 전자서명 구현하기

 

아래의 input박스의 값을 복사하여 크롬브라우저에 붙여넣기를하면

위와 같이 이미지 파일로 변환된 사인을 볼 수 있다.

 

 

 

이제 코드를 알아보자

<%@ page language="java" contentType="text/html; charset=utf-8"	pageEncoding="utf-8"%>

<script type="text/javascript" src="/js/jsignature/jSignature.min.js"></script>

<style>
.bg_orange {
	background: #ff8025 !important;
	color: #fff !important;
	border: 1px solid #ff8025 !important;
}
.bg_orange:hover {
	background: #D96A1B !important;
	color: #fff;
	border: 1px solid #D96A1B !important;
}
.bg_blue {
	background: #0082e5 !important;
	color: #fff !important;
	border: 1px solid #0082e5 !important;
}
.bg_blue:hover {
	background: #126aca !important;
	color: #fff;
	border: 1px solid #126aca !important;
}
</style>
<script>
$(function(){
	$('#signature').jSignature();
	
	var $sigdiv = $('#signature');
	var datapair = $sigdiv.jSignature('getData');
	
	$('#signature').bind('change', function(e) {
		var data = $('#signature').jSignature('getData');
        // data+""로 한 이유는 DB에 저장하기 위해서이다.
		$("#signVal").val(data+"");
	});
	
	$('#reset').click(function(e){
		$('#signature').jSignature('clear');
		$("#signVal").val('');
		e.preventDefault();
	});
	
	$('#btnSave').click(function(e){
		// 저장 코드 작성
	});
});
</script>

<div id="content">
    <div id="signature" style="border:1px solid black;"></div>
    <div><input id="signVal" style="width:100%"/></div>
    
    <div class="mt10 clear row">
         <div class="col-xs-4"></div>
         <div class="col-xs-4 tc">
	        <a href="#" class="base_button bg_orange" id="reset">초기화</a>
	        <a href="#" class="base_button bg_blue" id="btnSave">저장</a>
         </div>
         <div class="col-xs-4 tr">
         </div>
     </div>
</div>

이와같이 코드를 작성해주면 된다.