다른 수많은 게시글들이 있지만
저는 그 중 jQuery Plugin을 이용해서 개발을 진행했어요.
https://www.jqueryscript.net/other/Smooth-Signature-Pad-Plugin-with-jQuery-Html5-Canvas.html
Smooth Signature Pad Plugin with jQuery and Html5 Canvas
Signature Pad is a jQuery plugin that takes advantage of HTML5 canvas element and javascript to create a flexible and smooth Signature Pad on your web page & app.
www.jqueryscript.net
이 사이트에 접속해서 다운로드 버튼을 클릭하면 여러 예시를 제공해줍니다.
저는
이런식으로 임시로 만들었어요.
필요에 따라 다른 곳에서 쓰이게 만들기 위해 예제 파일을 만들었다는 점을 감안해주세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>서명 패드</title>
<!-- 서명 플러그인 -->
<link href="/mobile/css/jquery.signaturepad.css" rel="stylesheet">
<script src="/mobile/js/jquery.signaturepad.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js">
</script>
<script type="text/javascript"></script>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<form method="post" action="" class="sigPad">
<p class="drawItDesc">서명을 해주세요.</p>
<ul class="sigNav">
<li class="drawIt"><a href="#draw-it">서명란</a></li>
<li class="clearButton"><a href="#clear">지우기</a></li>
</ul>
<div class="sig sigWrapper">
<div class="typed"></div>
<canvas class="pad" width="400" height="150"></canvas>
<input type="hidden" name="output" class="output">
</div>
<button type="submit" id="save">서명완료</button>
<button type="submit" onclick="window.location.href='signView.jsp'">
서명뷰어
</button>
</form>
</body>
<script>
$(document).ready(function() {
var compressedData;
$('.sigPad').signaturePad({drawOnly:true});
$('#save').click(function(event) {
event.preventDefault(); // 폼의 기본 제출 동작을 방지
// 서명 데이터를 JSON 형식으로 가져오기
var signatureData = $('.sigPad').signaturePad().getSignatureString();
// 서명 데이터를 압축
compressedData = LZString.compressToBase64(signatureData);
// 압축된 데이터를 숨겨진 input에 저장
$('input.output').val(compressedData);
// 압축된 데이터 출력 (선택 사항)
console.log(compressedData);
fnSave();
});
// 저장함수
function fnSave() {
// 변수 compressedData 를 저장하면 됩니다.
}
});
</script>
</html>
js나 css는 다운받아 사용하시면 됩니다.
조회하는 방법입니다.
위 방식대로 압축해서 저장하면 압축을 풀면서 보여주게 됩니다.
위 데이터를 db에 저장하고
db에서 조회하면서 사인을 보여주게 만들어보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>서명 Viewer</title>
<!-- 서명 플러그인 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js">
</script>
<script type="text/javascript"></script>
<style>
body { font: normal 100.01%/1.375 "Helvetica Neue", Helvetica, Arial, sans-serif; }
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="signatureCanvas"></canvas>
<button type="submit" onclick="window.location.href='workerSign.jsp'">서명작성</button>
<script>
// 조회
testSrch();
// 테스트 조회 함수
function testSrch() {
var svcId = "testSrch";
var type = "POST";
var url = "";
var errorMsg = "error";
var inData = JSON.stringify({
"testFilter" : testFilter
})
transaction(svcId, type, url, inData, errorMsg, fnCallback);
}
function fnCallback(svcId, data) {
if (svcId === "testSrch") {
// sign != null 확인
for(var i=0; i < data.length; i++) {
if (data[i].sign) {
compressedSignatureData = data[i].sign;
signView();
}
}
}
}
// 서명 데이터(압축)
var compressedSignatureData = '';
// 서명 데이터를 그리는 함수
function drawSignature(data) {
// Canvas / 컨텍스트
const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
// 캔버스 초기화
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
for (let i = 0; i < data.length; i++) {
const point = data[i];
ctx.moveTo(point.mx, point.my);
ctx.lineTo(point.lx, point.ly);
}
ctx.stroke();
}
function signView() {
console.log("compressedSignatureData = " + compressedSignatureData);
// 압축된 데이터 복원
const decompressedSignatureData
= LZString.decompressFromBase64(compressedSignatureData);
// 복원된 서명을 JSON화
const signatureData = JSON.parse(decompressedSignatureData);
// 서명 그리기
drawSignature(signatureData);
}
</script>
</body>
</html>
compressedSignatureData에 압축한 데이터를 넣어주시면 됩니다.
'Web Programming > jQuery' 카테고리의 다른 글
| [jQuery] ajax 모듈화 시키기(트랜잭션 공통코드 만들기) (0) | 2024.03.05 |
|---|---|
| [jQuery] date타입 공통코드 만들기(자동 날짜 설정 (오늘, n일후, n일전 등)/ date 모듈화) (1) | 2024.02.28 |
