728x90
<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");
}
});
온라인에서 서명이 가능하게 누군가가 만들어 주셨습니다. 우리는 그 플러그인을 가져다 쓰기만 하면 됩니다.
canvas 태그에 style을 넣으면 이상하게 펜 부분을 따로 설정해야 하더라구요. 귀찮기도 하고 해서 저렇게 아주 오래 전 스타일로...
사용 방법이라고 할 만한 게 딱히 없을 정도로 심플합니다.
isEmpty() 함수로 서명 부분에 값이 있는지 없는지만 체크해서 이미지는 base64로 넘기니까 서버로 넘겨서 저장만 하면 끝납니다.
반응형
'Programming > Javascript' 카테고리의 다른 글
[jQuery]동적으로 엘리먼트 추가하기 (0) | 2020.03.13 |
---|---|
filter (0) | 2020.02.28 |
[jQuery]전체 선택 (0) | 2020.02.27 |
[jQuery]복사, 붙여넣기, 잘라내기 안 되게... (0) | 2020.02.27 |
[jQuery]세 자리마다 콤마 찍기 number format (0) | 2020.02.17 |
Comments