웹에서 서명하기, signature_pad.js

<meta charset="utf-8">
<style>
#signature { border:1px solid #000; }
#save, #clear { padding:5px 20px; border:0; color:#fff; background:#000; margin-top:5px; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
<canvas id="signature" width="600" height="200"></canvas>
<div>
	<button id="save">Save</button>
	<button id="clear">Clear</button>
</div>

var canvas = $("#signature")[0];
var signature = new SignaturePad(canvas, {
	minWidth : 2,
	maxWidth : 2,
	penColor : "rgb(0, 0, 0)"
});

$("#clear").on("click", function() {
	signature.clear();
});

$("#save").on("click", function() {
	if(signature.isEmpty()) {
		alert("내용이 없습니다.");
	} else {
		var data = signature.toDataURL("image/png");
		window.open(data, "test", "width=600, height=200, scrollbars=no");
	}
});

[출처, Demo, JSFiddle]

온라인에서 서명이 가능하게 누군가가 만들어 주셨습니다. 우리는 그 플러그인을 가져다 쓰기만 하면 됩니다.

 

canvas 태그에 style을 넣으면 이상하게 펜 부분을 따로 설정해야 하더라구요. 귀찮기도 하고 해서 저렇게 아주 오래 전 스타일로...

사용 방법이라고 할 만한 게 딱히 없을 정도로 심플합니다.

isEmpty() 함수로 서명 부분에 값이 있는지 없는지만 체크해서 이미지는 base64로 넘기니까 서버로 넘겨서 저장만 하면 끝납니다.