Notice
Recent Posts
Recent Comments
Tags more
«   2025/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[Javascript] jquery 서명하고 이미지 저장하기 본문

javascript

[Javascript] jquery 서명하고 이미지 저장하기

웹개발자 워니 2023. 4. 22. 14:45

https://nowonbun.tistory.com/636

 

[Javascript] 서명 마크(sign)를 만드는 방법(canvas태크)

안녕하세요. 명월입니다. 이 글은 html에서 서명 마크(sign)를 만드는 방법(canvas)에 대한 글입니다. 웹 설계를 하면 승인에 관계된 시스템이나 서명이 필요한 프로그램을 만들 경우가 많이 있습니

nowonbun.tistory.com

 

javascript상으로 서명하고 이미지 저장하는 방법 

간단한 소스이다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!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>
 cs

 

 

 

'javascript' 카테고리의 다른 글

[Javascript] getElementsByClassName 사용시 주의점  (3) 2023.08.01
[Javascript] jquery 현재 문서 그대로 PDF 파일 생성하기  (0) 2023.04.30
[javascript] a태그 클릭시 위로 이동되는 현상 방지  (0) 2023.01.16
[javascript] 동영상 재생 관련 사용법 - HTML5 Video 태그  (0) 2022.11.30
[javascript] window.onbeforeunload 창닫기 이벤트  (1) 2022.11.30
'javascript' Related Articles more
Comments