웹에서 signature_pad.js 사용해서 서명받기 예제

Javascript 2015. 12. 7. 16:11



Signature Pad : https://github.com/szimek/signature_pad


Demo 사이트 : http://szimek.github.io/signature_pad/


요기에 가보면 어떤 머리좋고 착한 사람이 웹에서 사인을 할 수 있도록 지원해주는 js 를 맨들어 놓고 설명을 해 주고 있다.


웹에서 사인한 이미지를 php 을 사용해서 png 이미지 파일을 생성하는 예제는 있는데 Java 예제는 없어서 Java 로 하는걸 살짝 맹글어 보았다.


뭐 별건 아니고 BASE64 로 인코딩된 문자열을 다시 디코딩해서 png 파일로 맨드는것만 하면 된다.



보다 쉬운 편의를 위해서 Apache Commons 프로젝트에 있는 라이브러리 몇개(lang, io, codec)를 가져다 썼다.


maven 을 사용하는 사람들은 디펜던시에 요걸 추가해 주면 되고 아니면 그냥 commons.apache.org 에 가서 다운로드 받으면 된다.

        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.10</version>
        </dependency>

        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
        
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.4</version>
        </dependency>



HTML

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>::: 사인패드 테스트 :::</title>

    <script src="${pageContext.request.contextPath}/resources/js/jquery-1.11.3.min.js" type="text/javascript">
    </script>
    <script src="${pageContext.request.contextPath}/resources/js/signature_pad.min.js" type="text/javascript">
    </script>
    
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/css.css">
</head>

<body>
    <div id="signature-pad" class="m-signature-pad">
        <div class="m-signature-pad--body">
            <canvas></canvas>
        </div>
        <div class="m-signature-pad--footer">
            <div class="description">사인해 주세요~</div>
            <button type="button" class="button clear" data-action="clear">지우기</button>
            <button type="button" class="button save" data-action="save">저장</button>
        </div>
    </div>
    
    <script>
        var canvas = $("#signature-pad canvas")[0];
        var sign = new SignaturePad(canvas, {
            minWidth: 5,
            maxWidth: 10,
            penColor: "rgb(66, 133, 244)"
        });
        
        $("[data-action]").on("click", function(){
            if ( $(this).data("action")=="clear" ){
                sign.clear();
            }
            else if ( $(this).data("action")=="save" ){
                if (sign.isEmpty()) {
                    alert("사인해 주세요!!");
                } else {
                    $.ajax({
                        url : "save.jsp",
                        method : "post",
                        dataType : "json",
                        data : {
                            sign : sign.toDataURL()
                        },
                        success : function(r){
                            alert("저장완료 : " + r.filename);
                            sign.clear();
                        },
                        error : function(res){
                            console.log(res);
                        }
                    });
                }
            }
        });
        
        
        function resizeCanvas(){
            var canvas = $("#signature-pad canvas")[0];
    
            var ratio =  Math.max(window.devicePixelRatio || 1, 1);
            canvas.width = canvas.offsetWidth * ratio;
            canvas.height = canvas.offsetHeight * ratio;
            canvas.getContext("2d").scale(ratio, ratio);
        }
        
        $(window).on("resize", function(){
            resizeCanvas();
        });

        resizeCanvas();
    </script>
</body>
</html>


save.jsp


잠깐 테스트로 예제를 작성하는것이기 때문에 Controller 없이 그냥 jsp 로 맨들어 보았다.

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

<%@page import="org.apache.commons.codec.binary.Base64"%>
<%@page import="org.apache.commons.io.FileUtils"%>
<%@page import="org.apache.commons.lang3.StringUtils"%>

<%@page import="java.io.File"%>

<%
    String sign = StringUtils.split(request.getParameter("sign"), ",")[1];

    String fileName = "sign"+System.currentTimeMillis()+".png";

    FileUtils.writeByteArrayToFile(new File("d:\\"+fileName), Base64.decodeBase64(sign));
%>

{
    "filename" : "<%= fileName %>"
}



예제 프로젝트 다운로드


JavascriptSignature.zip


저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

네이버맵 : clientId와 웹 서비스 url을 확인해주시기 바랍니다. 메시지가 나올때  (0) 2017.02.14
jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때  (0) 2012.11.08
Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기  (0) 2012.05.30
Javascript 숫자에 천단위로 콤마(,) 찍기  (1) 2011.11.29
순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기  (2) 2011.11.14
Posted by 스토브
openclose

티스토리툴바