Comment insérer des signatures dans des documents PDF avec HTMLnd JavaScript

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

1. Clonez le code source du référentiel GitHub :
   

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

2. Accédez au répertoire document_annotation :
   

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

3. Ouvrez le projet dans Visual Studio Code.

Étape 2 : ajouter un bouton de signature

1. 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;
   }
   
   

   

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

3. Ajoutez le gestionnaire d'événements de clic pour le bouton de signature :
   

   editViewer.on("sign", sign);
   
   function sign() {
       ...
   }
   

É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

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

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

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

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

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() {
    ...
}

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

Pour insérer la signature dans le document PDF :

1. Convertir le canevas en blob :
   

   <div>
   
   
   
   <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173421499729336.jpg?x-oss-process=image/resize,p_40" class="lazy" 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;
   

2. 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);
   

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

   

Code source

https://github.com/yushulx/web-twain-document-scan-management/tree/main/examples/document_annotation