[jquery] 전자서명 자바스크립트 코드, 한 획 지우기, 전체 지우기 코드

1. html

  <div id="signature-container">
    <canvas id="signature-pad" width="300" height="150"></canvas>
    <button id="clear-button">지우기</button>
    <button id="undo-button">되돌리기</button>
    <button id="save-button">서명 저장</button>
  </div>

 

 

2. jquery

var canvas = document.getElementById("signature-pad");
	  var ctx = canvas.getContext("2d");
	  var drawing = false;
	  var history = [];

	  $(canvas).on("mousedown", function(e) {
	    drawing = true;
	    ctx.beginPath();
	    ctx.moveTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
	    history.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
	  });

	  $(canvas).on("mousemove", function(e) {
	    if (drawing) {
	      ctx.lineTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
	      ctx.stroke();
	    }
	  });

	  $(canvas).on("mouseup", function() {
	    drawing = false;
	  });

	  $("#clear-button").on("click", function() {
	    ctx.clearRect(0, 0, canvas.width, canvas.height);
	    history = [];
	    $("#signed-message").hide();
	  });

	  $("#undo-button").on("click", function() {
	    if (history.length > 0) {
	      ctx.putImageData(history.pop(), 0, 0);
	    }
	  });

	  $("#save-button").on("click", function() {
	    var signatureDataURL = canvas.toDataURL(); // 이미지 데이터 URL로 변환
	    // 여기서 서명 데이터를 처리하거나 전송할 수 있습니다.

	    $("#signed-message").show();
	  });