웹에서 서명하기, 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]

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