본문 바로가기
Web Programming/jQuery

[jQuery] 제이쿼리 웹앱(web/app)에서 서명/사인(sign) 만들고 조회하기

by jaey0ng 2024. 5. 20.

다른 수많은 게시글들이 있지만

저는 그 중 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에 압축한 데이터를 넣어주시면 됩니다.