Comment insérer des signatures dans des documents PDF avec HTMLnd JavaScript-js tutoriel-php.cn

Une signature électronique est une forme numérique de signature manuscrite qui permet aux individus de signer électroniquement des documents. Il est devenu un outil essentiel permettant aux entreprises et aux organisations de rationaliser le processus de signature, permettant de signer des documents en quelques clics depuis n'importe où dans le monde. Dans cet article, nous explorerons comment insérer une signature dans des documents PDF à l'aide de HTML5, JavaScript et Dynamsoft Document Viewer.

Vidéo de démonstration : Signer des documents PDF avec une signature électronique

Démo en ligne

https://yushulx.me/web-document-annotation/

Conditions préalables

Licence d'essai Dynasoft Capture Vision : obtenez une licence d'essai gratuite de 30 jours pour débloquer toutes les capacités des produits Dynamsoft.
Dynamsoft Document Viewer : ce SDK JavaScript permet une visualisation transparente des formats PDF, JPEG, PNG, Fichiers TIFF et BMP. Il propose également le rendu et l'enregistrement des annotations PDF. Lien de téléchargement : https://www.npmjs.com/package/dynamsoft-document-viewer.

Implémentation de la fonctionnalité de signature pour Web PDF Editor

Notre projet d'annotation de documents Web, construit avec Dynamsoft Document Viewer, est hautement extensible. Il inclut actuellement la détection de codes-barres pour les documents PDF. Dans les sections suivantes, nous vous guiderons étape par étape tout au long du processus d'ajout d'une signature électronique aux documents PDF.

Étape 1 : Obtenez le code source

Clonez le code source du référentiel GitHub :
```
git clone https://github.com/yushulx/web-twain-document-scan-management.git
```
Copier après la connexion
Copier après la connexion
Accédez au répertoire document_annotation :
```
cd web-twain-document-scan-management/examples/document_annotation
```
Copier après la connexion
Copier après la connexion
Ouvrez le projet dans Visual Studio Code.

Étape 2 : ajouter un bouton de signature

Dans main.css, ajoutez une icône matérielle pour le bouton de signature :
```
.icon-stylus::before {
    content: "edit";
}

.icon-stylus {
    display: flex;
    font-size: 1.5em;
}
```
Copier après la connexion
Copier après la connexion

Définissez le bouton de signature et ajoutez-le à la barre d'outils dans main.js :

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,
    ],
};

Copier après la connexion

Ajoutez le gestionnaire d'événements de clic pour le bouton de signature :
```
editViewer.on("sign", sign);

function sign() {
    ...
}
```
Copier après la connexion
Copier après la connexion

Étape 3 : Créer une boîte de dialogue contextuelle pour la saisie de signature

La boîte de dialogue contextuelle pour la saisie de la signature comprend les éléments suivants :

Un élément de toile pour dessiner la signature.
Options de couleur pour changer la couleur de la signature.
Un curseur de trait pour ajuster l'épaisseur de la signature.
Coordonnées X et Y pour le positionnement de la signature.
Un bouton Enregistrer pour insérer la signature dans le document PDF.
Un bouton Annuler pour fermer la boîte de dialogue.
Un bouton redessiner pour effacer la signature.

Code HTML

git clone https://github.com/yushulx/web-twain-document-scan-management.git

Copier après la connexion

Ajouter des écouteurs d'événements pour les événements de souris :

cd web-twain-document-scan-management/examples/document_annotation

Copier après la connexion

Ajoutez des écouteurs d'événements pour les options de couleur et de trait :

.icon-stylus::before {
    content: "edit";
}

.icon-stylus {
    display: flex;
    font-size: 1.5em;
}

Copier après la connexion

Implémentez les fonctions de dessin :

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,
    ],
};

Copier après la connexion

Tous les chemins sont stockés dans le tableau drawHistory. La fonction redrawCanvas parcourt le tableau et redessine les chemins sur le canevas.

Ajouter des écouteurs d'événements pour les boutons OK, Redessiner et Annuler :

editViewer.on("sign", sign);

function sign() {
    ...
}

Copier après la connexion

Étape 4 : Insérer des signatures dans les documents

Pour insérer la signature dans le document PDF :

Convertir le canevas en 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;

Copier après la connexion

Obtenir l'ID de la page actuelle et les données de la page :

canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);

Copier après la connexion

Créez de nouvelles annotations de tampon avec l'image de signature :

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();
});

Copier après la connexion

How to Insert Signatures into PDF Documents with HTMLnd JavaScript