[canvas 이용] 서명후 파일로 다운로드 기능 > 그누보드5 플러그인

그누보드5 플러그인

그누보드는 다양한 기능을 추가하기 쉽습니다.

[canvas 이용] 서명후 파일로 다운로드 기능 정보

[canvas 이용] 서명후 파일로 다운로드 기능

첨부파일

sign.php (4.3K) 39회 다운로드 2023-08-27 01:42:52
테스트한 버전5.3
호환 가능 버전5.3 이상

본문

[canvas 이용] 서명후 파일로 다운로드 기능

 

전자서명 할일이 있어서 사인하고 보관까지 필요하여 만들게 되었습니다.

 


<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>title</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
  <!-- 서명 공간 -->
  <div style="width:300px; height:300px;">
    <canvas id="canvas" style="border:1px solid black"></canvas>
  </div>
  <div>
    <!-- 저장 버튼 -->
    <button id="save">save</button>
  <div>
  <script>
    (function(obj){
      obj.init();
      $(obj.onLoad);
    })((function(){
      var canvas = $("#canvas");
      var div = canvas.parent("div");
      // 캔버스의 오브젝트를 가져옵니다.
      var ctx = canvas[0].getContext("2d");
      var drawble = false;
      
      // 이제 html 버그인지는 모르겠는데 canvas의 style의 height와 width를 수정하게 되면 그림이 이상하게 그려집니다.
      function canvasResize(){
        canvas[0].height = div.height();
        canvas[0].width = div.width();
      }
      // pc에서 서명을 할 경우 사용되는 이벤트입니다.
      function draw(e){
        function getPosition(){
          return {
            X: e.pageX - canvas[0].offsetLeft, 
            Y: e.pageY - canvas[0].offsetTop
          }
        }
        switch(e.type){
          case "mousedown":{
            drawble = true;
            ctx.beginPath();
            ctx.moveTo(getPosition().X, getPosition().Y);
          }
          break;
          case "mousemove":{
            if(drawble){
              ctx.lineTo(getPosition().X, getPosition().Y);
              ctx.stroke();
            }
          }
          break;
          case "mouseup":
          case "mouseout":{
            drawble = false;
            ctx.closePath();
          }
          break;
        }
      }
      // 스마트 폰에서 서명을 할 경우 사용되는 이벤트입니다.
      function touchdraw(e){
        function getPosition(){
          return {
            X: e.changedTouches[0].pageX - canvas[0].offsetLeft, 
            Y: e.changedTouches[0].pageY - canvas[0].offsetTop
          }
        }
        switch(e.type){
          case "touchstart":{
            drawble = true;
            ctx.beginPath();
            ctx.moveTo(getPosition().X, getPosition().Y);
          }
          break;
          case "touchmove":{
            if(drawble){
              // 스크롤 이동등 이벤트 중지..
              e.preventDefault();
              ctx.lineTo(getPosition().X, getPosition().Y);
              ctx.stroke();
            }
          }
          break;
          case "touchend":
          case "touchcancel":{
            drawble = false;
            ctx.closePath();
          }
          break;
        }
      }
      // 참고로 mousedown은 touchstart와 mousemove는 touchmove, mouseup은 touchend와 같습니다.
      // mouseout와 touchcancel은 서로 다른 동작인데, mouseout은 canvas 화면을 벗어났을 때이고 touchcancel는 모바일에서 터치가 취소, 즉 에러가 났을 때 입니다.
      return {
        init: function(){
          // 캔버스 사이즈 조절
          $(window).on("resize", canvasResize);
          
          canvas.on("mousedown", draw);
          canvas.on("mousemove", draw);
          canvas.on("mouseup", draw);
          canvas.on("mouseout", draw);
          // 스마트 폰의 터치 이벤트
          canvas.on("touchstart", touchdraw);
          canvas.on("touchend", touchdraw);
          canvas.on("touchcancel", touchdraw);
          canvas.on("touchmove", touchdraw);
          // save 버튼을 누르면 imageupload.php로 base64코드를 보내서 이미지로 변환합니다.
          $("#save").on("click", function(){
            // a 태그를 만들어서 다운로드를 만듭니다.
            var link = document.createElement('a'); 
            // base64데이터 링크 달기
            link.href = canvas[0].toDataURL("image/png"); 
            // 다운로드시 파일명 지정
            link.download = "image.png"; 
            // body에 추가
            document.body.appendChild(link); 
            link.click(); 
            document.body.removeChild(link); 
            // 다운로드용 a 태그는 다운로드가 끝나면 삭제합니다.
            form.remove();
          });
        },
        onLoad: function(){
          // 캔버스 사이즈 조절
          canvasResize();
        }
      }
    })());
  </script>
</body>
</html>
추천
13

댓글 전체

혹시 욕심입니다만...
새로쓰기 를 추가 하고 싶은데요...
싸인하다보면 다시 쓰고 싶잖아요...^^
이걸 추가 하고 싶은데...혹시 아시는분 기능업 부탁드려도 될까요?

좋은 하루 되세요.
<button onclick="run_clear()">clear</button>
추가하고
  function run_clear(){
      canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');
          context.clearRect(0, 0, canvas.width, canvas.height);
  }
스크립트를 추가하시면 clear 하실수 있습니다.
전체 500
그누보드5 플러그인 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT