Eine E-Signatur ist eine digitale Form einer handschriftlichen Unterschrift, die es Einzelpersonen ermöglicht, Dokumente elektronisch zu unterzeichnen. Es ist für Unternehmen und Organisationen zu einem unverzichtbaren Tool zur Rationalisierung des Signaturprozesses geworden und ermöglicht das Signieren von Dokumenten mit nur wenigen Klicks von überall auf der Welt. In diesem Artikel erfahren Sie, wie Sie mithilfe von HTML5, JavaScript und Dynamsoft Document Viewer eine Signatur in PDF-Dokumente einfügen.
https://yushulx.me/web-document-annotation/
Dynamsoft Capture Vision-Testlizenz: Erhalten Sie eine 30-tägige kostenlose Testlizenz, um alle Funktionen der Dynamsoft-Produkte freizuschalten.
Dynamsoft Document Viewer: Dieses JavaScript SDK ermöglicht die nahtlose Anzeige von PDF, JPEG, PNG, TIFF- und BMP-Dateien. Es ermöglicht auch das Rendern und Speichern von PDF-Anmerkungen. Download-Link: https://www.npmjs.com/package/dynamsoft-document-viewer.
Unser Webdokumentanmerkungsprojekt, das mit dem Dynamsoft Document Viewer erstellt wurde, ist hoch erweiterbar. Es umfasst derzeit die Barcode-Erkennung für PDF-Dokumente. In den folgenden Abschnitten führen wir Sie Schritt für Schritt durch den Prozess des Hinzufügens einer elektronischen Signatur zu PDF-Dokumenten.
Klonen Sie den Quellcode aus dem GitHub-Repository:
git clone https://github.com/yushulx/web-twain-document-scan-management.git
Navigieren Sie zum Verzeichnis document_annotation:
cd web-twain-document-scan-management/examples/document_annotation
Öffnen Sie das Projekt in Visual Studio Code.
Fügen Sie in main.css ein Materialsymbol für die Signaturschaltfläche hinzu:
.icon-stylus::before {
content: "edit";
}
.icon-stylus {
display: flex;
font-size: 1.5em;
}
Definieren Sie die Signaturschaltfläche und fügen Sie sie zur Symbolleiste in main.js hinzu:
const signatureButton = {
type: Dynamsoft.DDV.Elements.Button,
className: "material-icons icon-stylus",
tooltip: "Sign the document",
events: {
click: "sign",
}
}
const pcEditViewerUiConfig = {
type: Dynamsoft.DDV.Elements.Layout,
flexDirection: "column",
className: "ddv-edit-viewer-desktop",
children: [
{
type: Dynamsoft.DDV.Elements.Layout,
className: "ddv-edit-viewer-header-desktop",
children: [
{
type: Dynamsoft.DDV.Elements.Layout,
children: [
Dynamsoft.DDV.Elements.ThumbnailSwitch,
Dynamsoft.DDV.Elements.Zoom,
Dynamsoft.DDV.Elements.FitMode,
Dynamsoft.DDV.Elements.Crop,
Dynamsoft.DDV.Elements.Filter,
Dynamsoft.DDV.Elements.Undo,
Dynamsoft.DDV.Elements.Redo,
Dynamsoft.DDV.Elements.DeleteCurrent,
Dynamsoft.DDV.Elements.DeleteAll,
Dynamsoft.DDV.Elements.Pan,
Dynamsoft.DDV.Elements.AnnotationSet,
qrButton,
checkButton,
scanButton,
clearButton,
signatureButton,
],
},
{
type: Dynamsoft.DDV.Elements.Layout,
children: [
{
type: Dynamsoft.DDV.Elements.Pagination,
className: "ddv-edit-viewer-pagination-desktop",
},
loadButton,
downloadButton,
],
},
],
},
Dynamsoft.DDV.Elements.MainView,
],
};
Fügen Sie den Click-Event-Handler für die Signaturschaltfläche hinzu:
editViewer.on("sign", sign);
function sign() {
...
}
Der Popup-Dialog zur Signatureingabe enthält die folgenden Elemente:
HTML-Code
git clone https://github.com/yushulx/web-twain-document-scan-management.git
Ereignis-Listener für Mausereignisse hinzufügen:
cd web-twain-document-scan-management/examples/document_annotation
Ereignis-Listener für Farb- und Strichoptionen hinzufügen:
.icon-stylus::before {
content: "edit";
}
.icon-stylus {
display: flex;
font-size: 1.5em;
}
Implementieren Sie die Zeichenfunktionen:
const signatureButton = {
type: Dynamsoft.DDV.Elements.Button,
className: "material-icons icon-stylus",
tooltip: "Sign the document",
events: {
click: "sign",
}
}
const pcEditViewerUiConfig = {
type: Dynamsoft.DDV.Elements.Layout,
flexDirection: "column",
className: "ddv-edit-viewer-desktop",
children: [
{
type: Dynamsoft.DDV.Elements.Layout,
className: "ddv-edit-viewer-header-desktop",
children: [
{
type: Dynamsoft.DDV.Elements.Layout,
children: [
Dynamsoft.DDV.Elements.ThumbnailSwitch,
Dynamsoft.DDV.Elements.Zoom,
Dynamsoft.DDV.Elements.FitMode,
Dynamsoft.DDV.Elements.Crop,
Dynamsoft.DDV.Elements.Filter,
Dynamsoft.DDV.Elements.Undo,
Dynamsoft.DDV.Elements.Redo,
Dynamsoft.DDV.Elements.DeleteCurrent,
Dynamsoft.DDV.Elements.DeleteAll,
Dynamsoft.DDV.Elements.Pan,
Dynamsoft.DDV.Elements.AnnotationSet,
qrButton,
checkButton,
scanButton,
clearButton,
signatureButton,
],
},
{
type: Dynamsoft.DDV.Elements.Layout,
children: [
{
type: Dynamsoft.DDV.Elements.Pagination,
className: "ddv-edit-viewer-pagination-desktop",
},
loadButton,
downloadButton,
],
},
],
},
Dynamsoft.DDV.Elements.MainView,
],
};
Alle Pfade werden im DrawingHistory-Array gespeichert. Die redrawCanvas-Funktion durchläuft das Array und zeichnet die Pfade auf der Leinwand neu.
Ereignis-Listener für die Schaltflächen „OK“, „Neu zeichnen“ und „Abbrechen“ hinzufügen:
editViewer.on("sign", sign);
function sign() {
...
}
So fügen Sie die Signatur in das PDF-Dokument ein:
Konvertieren Sie die Leinwand in einen Blob:
<div>
<p><img src="https://img.php.cn/upload/article/000/000/000/173421499729336.jpg" alt="How to Insert Signatures into PDF Documents with HTMLnd JavaScript" /></p>
<p><strong>JavaScript code for the signature input dialog</strong></p>
<ol>
<li>
<p>Initialize the canvas and drawing context:<br>
</p>
<pre class="brush:php;toolbar:false">let canvas = document.getElementById("signatureCanvas");
let ctx = canvas.getContext("2d");
let isDrawing = false;
let color = "black";
let strokeWidth = 3;
let drawingHistory = [];
canvas.width = 500;
canvas.height = 300;
Rufen Sie die aktuelle Seiten-ID und die Seitendaten ab:
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
Erstellen Sie neue Stempelanmerkungen mit dem Signaturbild:
document.getElementById("blue").addEventListener("click", () => {
color = "blue";
redrawCanvas();
});
document.getElementById("red").addEventListener("click", () => {
color = "red";
redrawCanvas();
});
document.getElementById("black").addEventListener("click", () => {
color = "black";
redrawCanvas();
});
document.getElementById("strokeSlider").addEventListener("input", (e) => {
strokeWidth = e.target.value;
redrawCanvas();
});
https://github.com/yushulx/web-twain-document-scan-management/tree/main/examples/document_annotation
Das obige ist der detaillierte Inhalt vonSo fügen Sie mit HTML und JavaScript Signaturen in PDF-Dokumente ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
