JavaScript to implement mobile signature function

This article shares the specific code of JavaScript to implement the mobile signature function for your reference. The specific content is as follows

1. HTML part

<div class="mui-content-padded">
 <div class="mui-inline"><font style="font-family: '微软雅黑';font-size: 1.2rem;">Signature of the acceptor:</font></div>
</div>
<div class="mui-content-canvasDiv" style="overflow: hidden;">
 <canvas id="myCanvas" width="660" height="360" style="border:1px solid #f2f2f2;"></canvas>
 <div class="saveimgs" id="saveImgDiv"></div>
</div>

myCanvas is the signed div, saveImgDiv is the div that is echoed after saving.

2. Page initialization, add div signature function

InitThis();

var mousePressed = false;
var lastX, lastY;
var ctx = document.getElementById('myCanvas').getContext("2d");
var c = document.getElementById("myCanvas");
var selected1, selected2;
function InitThis() {
 // Touch screen c.addEventListener('touchstart', function(event) {
  console.log(1)
  if (event.targetTouches.length == 1) {
   event.preventDefault(); // Prevent browser default events, important mousePressed = true;
   Draw(event.touches[0].pageX - this.offsetLeft, event.touches[0].pageY - this.offsetTop, false);
  }
 }, false);
 c.addEventListener('touchmove', function(event) {
  console.log(2)
  if (event.targetTouches.length == 1) {
   event.preventDefault(); // Prevent browser default events, important if(mousePressed) { 
    Draw(event.touches[0].pageX - this.offsetLeft, event.touches[0].pageY - this.offsetTop, true);
 
   }
  }
 }, false);
 c.addEventListener('touchend', function(event) {
  console.log(3)
  if (event.targetTouches.length == 1) {
   event.preventDefault(); // Prevent browser default events to prevent screen dragging during handwriting, important mousePressed = false;
  }
 }, false);
 // Mouse c.onmousedown = function(event) {
  mousePressed = true;
  Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false);
 };
 c.onmousemove = function(event) {
  if(mousePressed) {
   Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
  }
 };
 c.onmouseup = function(event) {
  mousePressed = false;
 };
}
 
function Draw(x, y, isDown) {
 if(isDown) {
  ctx.beginPath();
  ctx.strokeStyle = selected2;
  ctx.lineWidth = selected1;
  ctx.lineJoin = "round";
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(x, y);
  ctx.closePath();
  ctx.stroke();
 }
 lastX = x;
 lastY = y;
}

3. Get the image path and put it in saveImgDiv, signature echo logic

var file = "http://10.1.31.173:8097/upload/" + iv[0].zjqm + "?v=" + new Date().getTime();
 
$("#saveImgDiv").append('<img src="'+ file + '" style="background:white" width="660" height="360">');

4. Save the user signature, which can be placed in the callback of saving successful submission

var saveimgs = document.getElementsByClassName("saveimgs")[0];
 
//Save signature image var image = c.toDataURL("image/png");
var ctximg = document.createElement("span");
ctximg.innerHTML = "<img src='" + image + "' alt='from canvas'/>";
if (saveimgs.getElementsByTagName('span').length >= 1) {
 var span_old = saveimgs.getElementsByTagName("span")[0];
 saveimgs.replaceChild(ctximg,span_old)
} else {
 saveimgs.appendChild(ctximg);
}

Effect

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: