Notice
Recent Posts
Recent Comments
Link
«   2024/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
Tags more
Archives
Today
Total
관리 메뉴

투덜이 개발자

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

Program Language/JavaScript & Jquery

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

엠투 2021. 6. 22. 14:04
반응형

https://nowonbun.tistory.com/636

 

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

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

nowonbun.tistory.com

<!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데이터 링크 달기

			console.log(canvas[0].toDataURL("image/png"));	// data:image/png;base64,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

            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>
반응형
저작자표시

'Program Language > JavaScript & Jquery' 카테고리의 다른 글

[jquery] datepicker 특정일만 선택  (0) 2021.10.28
[jQuery] radio button 제어, 사용법  (0) 2021.09.16
Swipe  (0) 2021.07.13
datepicker  (0) 2021.07.13
[ajax] Error code 0, error undefined  (0) 2021.05.28
'Program Language/JavaScript & Jquery' Related Articles more