JavaScript zur Implementierung der mobilen Signaturfunktion

In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung der mobilen Signaturfunktion zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

1. HTML-Teil

<div Klasse="mui-content-padded">
 <div class="mui-inline"><font style="font-family: '微软雅黑';font-size: 1.2rem;">Signatur des Akzeptanten:</font></div>
</div>
<div Klasse = "mui-content-canvasDiv" Stil = "Überlauf: ausgeblendet;">
 <canvas id="myCanvas" width="660" height="360" style="border:1px solid #f2f2f2;"></canvas>
 <div Klasse="saveimgs" id="saveImgDiv"></div>
</div>

myCanvas ist das signierte Div, saveImgDiv ist das Div, das nach dem Speichern wiederholt wird.

2. Seiteninitialisierung, Div-Signaturfunktion hinzufügen

InitThis();

var mousePressed = false;
var letztesX, letztesY;
var ctx = document.getElementById('myCanvas').getContext("2d");
var c = document.getElementById("myCanvas");
var ausgewählt1, ausgewählt2;
Funktion InitThis() {
 // Touchscreen c.addEventListener('touchstart', function(event) {
  console.log(1)
  wenn (event.targetTouches.length == 1) {
   event.preventDefault(); // Standardereignisse des Browsers verhindern, wichtig mousePressed = true;
   Zeichnen(event.touches[0].pageX - this.offsetLeft, event.touches[0].pageY - this.offsetTop, false);
  }
 }, FALSCH);
 c.addEventListener('touchmove', Funktion(Ereignis) {
  console.log(2)
  wenn (event.targetTouches.length == 1) {
   event.preventDefault(); // Browser-Standardereignisse verhindern, wichtig if(mousePressed) { 
    Zeichnen(event.touches[0].pageX - this.offsetLeft, event.touches[0].pageY - this.offsetTop, true);
 
   }
  }
 }, FALSCH);
 c.addEventListener('touchend', Funktion(Ereignis) {
  console.log(3)
  wenn (event.targetTouches.length == 1) {
   event.preventDefault(); // Verhindere Standardereignisse des Browsers, um das Ziehen des Bildschirms während der Handschrift zu verhindern, wichtig mousePressed = false;
  }
 }, FALSCH);
 // Maus c.onmousedown = Funktion(Ereignis) {
  Maus gedrückt = wahr;
  Zeichnen(event.pageX - dieser.offsetLinks, event.pageY - dieser.offsetOben, false);
 };
 c.onmousemove = Funktion(Ereignis) {
  if(Maus gedrückt) {
   Zeichnen(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
  }
 };
 c.onmouseup = Funktion(Ereignis) {
  Maus gedrückt = falsch;
 };
}
 
Funktion Zeichnen(x, y, isDown) {
 wenn(istUnten) {
  ctx.beginPath();
  ctx.strokeStyle = ausgewählt2;
  ctx.lineWidth = ausgewählt1;
  ctx.lineJoin = "runde";
  ctx.moveTo(letztesX, letztesY);
  ctx.lineTo(x, y);
  ctx.closePath();
  ctx.stroke();
 }
 letztesX = x;
 letztesY = y;
}

3. Holen Sie sich den Bildpfad und legen Sie ihn in saveImgDiv ab, Signatur-Echo-Logik

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

4. Speichern Sie die Benutzersignatur, die im Rückruf zum Speichern der erfolgreichen Übermittlung platziert werden kann

var saveimgs = document.getElementsByClassName("saveimgs")[0];
 
//Signaturbild speichern var image = c.toDataURL("image/png");
var ctximg = document.createElement("span");
ctximg.innerHTML = "<img src='" + Bild + "' alt='von Canvas'/>";
wenn (saveimgs.getElementsByTagName('span').length >= 1) {
 var span_old = saveimgs.getElementsByTagName("span")[0];
 saveimgs.replaceChild(ctximg,span_old)
} anders {
 saveimgs.appendChild(ctximg);
}

Wirkung

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: