Heim > Artikel > Web-Frontend > Erstellen Sie ein Online-Tool für elektronische Signaturen mit JavaScript

Erstellen Sie ein Online-Tool für elektronische Signaturen mit JavaScript

WBOYOriginal: 2023-08-09 12:01:051307Durchsuche

Verwenden Sie JavaScript, um ein Online-Tool für elektronische Signaturen zu erstellen

Mit dem Aufkommen des digitalen Zeitalters sind elektronische Signaturen zu einer schnellen, bequemen und sicheren Möglichkeit der Geschäftskommunikation geworden. Bei der Entwicklung von Online-Tools für elektronische Signaturen ist JavaScript zweifellos eine leistungsstarke Sprachwahl. In diesem Artikel wird anhand von Codebeispielen erläutert, wie Sie mithilfe von JavaScript ein einfaches, aber leistungsstarkes Online-Tool für elektronische Signaturen erstellen.

Bevor wir beginnen, müssen wir einige Konzepte verstehen. Im Allgemeinen gibt es zwei Arten elektronischer Signaturen: bildbasierte Signaturen und vektorgrafikbasierte Signaturen. Ersteres zeigt das echte Signaturbild des Benutzers auf der Webseite an, während letzteres JavaScript verwendet, um die Signaturgrafik zu zeichnen. In diesem Artikel verwenden wir eine vektorgrafikbasierte Signatur.

Zuerst benötigen wir eine HTML-Seite als Basis. Auf der Seite platzieren wir ein Canvas-Element, damit der Benutzer seine Unterschrift zeichnen kann. Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
    <title>在线电子签名工具</title>
    <script src="signature.js"></script>
</head>
<body>
    <h1>在线电子签名工具</h1>
    <canvas id="signatureCanvas"></canvas>
    <button onclick="clearSignature()">清除签名</button>
    <button onclick="saveSignature()">保存签名</button>
    <img  id="savedSignature" / alt="Erstellen Sie ein Online-Tool für elektronische Signaturen mit JavaScript" >
</body>
</html>

Als nächstes benötigen wir eine JavaScript-Datei, um die Signaturzeichnungslogik zu verarbeiten. Der Code lautet wie folgt:

const canvas = document.getElementById('signatureCanvas');
const context = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;

canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    [lastX, lastY] = [e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop];
});

canvas.addEventListener('mousemove', (e) => {
    if (!isDrawing) return;
    const x = e.clientX - canvas.offsetLeft;
    const y = e.clientY - canvas.offsetTop;
    context.beginPath();
    context.moveTo(lastX, lastY);
    context.lineTo(x, y);
    context.stroke();
    [lastX, lastY] = [x, y];
});

canvas.addEventListener('mouseup', () => {
    isDrawing = false;
});

function clearSignature() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function saveSignature() {
    const image = document.getElementById('savedSignature');
    image.src = canvas.toDataURL();
}

Im obigen Code erhalten wir zunächst das Canvas-Element und sein Kontextobjekt. Anschließend haben wir die Mausereignisse abgehört, um die Zeichenposition der Signatur des Benutzers zu ermitteln. Beim Mouse-Down-Ereignis beginnen wir mit der Aufzeichnung der Koordinaten des letzten Punkts des Benutzers. Beim Mausbewegungsereignis zeichnen wir die Signaturgrafik basierend auf den aufgezeichneten Koordinaten und den aktuellen Koordinaten. Bei dem Mouse-Up-Ereignis stoppen wir die Aufzeichnung der Signaturzeichnung des Benutzers. Schließlich stellen wir Funktionen zum Löschen der Signatur und zum Speichern der Signatur bereit. Letztere weisen die durch die Signatur generierte DataURL einem Bildelement zu, um die Signatur anzuzeigen.

Schließlich müssen wir externe CSS-Dateien einführen, um die Seite zu verschönern. Sie können den Stil an Ihre eigenen Bedürfnisse anpassen. Der Beispielcode lautet wie folgt:

canvas {
    border: 1px solid #000;
    cursor: crosshair;
}

button {
    margin-top: 10px;
}

Durch die oben genannten Schritte haben wir erfolgreich ein einfaches Online-Tool für elektronische Signaturen erstellt. Benutzer können ihre eigene Signatur auf der Leinwand zeichnen, die Signatur über die Schaltfläche „Löschen“ löschen und die Signatur über die Schaltfläche „Speichern“ als Bild speichern. Entwickler können Funktionen entsprechend den Geschäftsanforderungen erweitern, z. B. das Hinzufügen einer Signaturüberprüfung, das Speichern von Signaturen auf Back-End-Servern usw.

Zusammenfassung: Die Verwendung von JavaScript zum Erstellen von Online-Tools für elektronische Signaturen kann Komfort und Sicherheit für die moderne Geschäftskommunikation bieten. Mithilfe der in diesem Artikel bereitgestellten Codebeispiele können Entwickler schnell ein leistungsstarkes Online-Tool für elektronische Signaturen implementieren und es entsprechend den Geschäftsanforderungen erweitern.

Das Obige ist ein Artikel über die Verwendung von JavaScript zum Erstellen eines Online-Tools für elektronische Signaturen. Ich hoffe, dass er den Lesern hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonErstellen Sie ein Online-Tool für elektronische Signaturen mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html 对象事件鼠标事件

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwendung von JavaScript zur Implementierung der SeitenzoomfunktionNächster Artikel：Verwendung von JavaScript zur Implementierung der Seitenzoomfunktion

In Verbindung stehende Artikel

Mehr sehen