js---手绘签名

最近在做项目，在做电子签章的时候，需要用到电子签名，下面是用JS进行手绘签名：

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手写签名</title>
<style type="text/css">
*{margin: 0; padding: 0;}
.canvas-box{width: 500px; margin: 50px auto;}
#canvas{width: 500px; height: 200px; border: 1px solid red;}
#qmimg{border: 1px solid red;}
</style>
</head>
<body>

  <div class="canvas-box">
    <button id="btn_submit">提交</button>
    <button id="btn_clear">清除</button>
    <br><br>
    <div id="canvasDiv" ></div>
    <br><br>
    <img id="qmimg" />
  </div>

  <script type="text/javascript">

  function onDocumentTouchStart( event ) {
    if( event.touches.length == 1 ) {
      event.preventDefault();
      var now = new Date().getTime();
      if ( now - timeOfLastTouch  < 250 ) {
        reset();
        return;
      }
      timeOfLastTouch = now;
      mouseX = event.touches[ 0 ].pageX;
      mouseY = event.touches[ 0 ].pageY;
      isMouseDown = true;
    }
  }

  function onDocumentTouchMove( event ) {
    if ( event.touches.length == 1 ) {
      event.preventDefault();
      mouseX = event.touches[ 0 ].pageX;
      mouseY = event.touches[ 0 ].pageY;
    }
  }

  function onDocumentTouchEnd( event ) {
    if ( event.touches.length == 0 ) {
      event.preventDefault();
      isMouseDown = false;
    }
  }

  var canvasDiv = document.getElementById('canvasDiv');
  var canvas = document.createElement('canvas');
  var canvasWidth = 500;
  var canvasHeight = 200;
  document.addEventListener( 'touchmove', onDocumentTouchMove, false); 

  var point = {};
  point.notFirst = false;

  canvas.setAttribute('width', canvasWidth);
  canvas.setAttribute('height', canvasHeight);
  canvas.setAttribute('id', 'canvas');
  canvasDiv.appendChild(canvas);
  if(typeof G_vmlCanvasManager != 'undefined') {
    canvas = G_vmlCanvasManager.initElement(canvas);
  }
  var context = canvas.getContext("2d");

  canvas.addEventListener("touchstart", function(e){
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;
    paint = true;
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
    redraw();
  });

  canvas.addEventListener("touchend", function(e){
    paint = false;
  });

  canvas.addEventListener("touchmove", function(e){
   if(paint){
      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
      redraw();
    }
  });

  canvas.addEventListener("mousedown", function(e){
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;
    paint = true;
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
    redraw();
  });

  canvas.addEventListener("mousemove", function(e){
    if(paint){
      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
      redraw();
    }
  });

  canvas.addEventListener("mouseup", function(e){
    paint = false;
  });

  canvas.addEventListener("mouseleave", function(e){
    paint = false;
  });

  var clickX = new Array();
  var clickY = new Array();
  var clickDrag = new Array();
  var paint;

  function addClick(x, y, dragging){
    clickX.push(x);
    clickY.push(y);
    clickDrag.push(dragging);
  }

  function redraw(){
    //canvas.width = canvas.width; // Clears the canvas
    context.strokeStyle = "#df4b26";
    context.lineJoin = "round";
    context.lineWidth = 2;
    while (clickX.length > 0 ) {
      point.bx = point.x;
      point.by = point.y;
      point.x = clickX.pop();
      point.y = clickY.pop();
      point.drag = clickDrag.pop();
      context.beginPath();
      if (point.drag && point.notFirst) {
        context.moveTo(point.bx, point.by);
      } else {
        point.notFirst = true;
        context.moveTo(point.x - 1, point.y);
      }
      context.lineTo(point.x, point.y);
      context.closePath();
      context.stroke();
    }
  }

  var clear = document.getElementById("btn_clear");
  var submit = document.getElementById("btn_submit");

  clear.addEventListener("click", function(){
    canvas.width = canvas.width;
  });

  submit.addEventListener("click", function(){
    document.getElementById("qmimg").setAttribute('src',canvas.toDataURL("image/png"));
  });

  </script>
</body>
</html>

打完收工！

posted @ 2023-12-05 15:28  帅到要去报警  阅读(401)  评论(0)  编辑  收藏  举报