HTMLnd JavaScript を使用して PDF ドキュメントに署名を挿入する方法

電子署名は、個人が文書に電子的に署名できるようにする手書き署名のデジタル形式です。企業や組織にとって署名プロセスを合理化するために不可欠なツールとなっており、世界中のどこからでも数回クリックするだけで文書に署名できるようになります。この記事では、HTML5、JavaScript、Dynamsoft Document Viewer を使用して PDF ドキュメントに署名を挿入する方法を説明します。

デモビデオ: 電子署名を使用して PDF ドキュメントに署名する

オンラインデモ

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

前提条件

• Dynamsoft Capture Vision 試用ライセンス: 30 日間の無料試用ライセンスを取得して、Dynamsoft 製品の全機能を利用可能にします。

• Dynamsoft Document Viewer: この JavaScript SDK により、PDF、JPEG、PNG、 のシームレスな表示が可能になります。 TIFF および BMPファイル。 PDF 注釈のレンダリングと保存機能も備えています。ダウンロードリンク: https://www.npmjs.com/package/dynamsoft-document-viewer.

Web PDF エディターの署名機能の実装

Dynamsoft Document Viewer を使用して構築された Web ドキュメント注釈プロジェクトは、非常に拡張性があります。現在、PDF ドキュメントのバーコード検出が含まれています。次のセクションでは、PDF ドキュメントに電子署名を追加するプロセスを段階的に説明します。

ステップ 1: ソース コードを取得する

1. GitHub リポジトリからソース コードのクローンを作成します:
   

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

2. document_annotation ディレクトリに移動します:
   

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

3. Visual Studio Code でプロジェクトを開きます。

ステップ 2: 署名ボタンを追加する

1. main.css で、署名ボタンのマテリアル アイコンを追加します。
   

   .icon-stylus::before {
       content: "edit";
   }
   
   .icon-stylus {
       display: flex;
       font-size: 1.5em;
   }
   
   

   

2. 署名ボタンを定義し、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. 署名ボタンのクリック イベント ハンドラーを追加します:
   

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

ステップ 3: 署名入力用のポップアップ ダイアログを作成する

署名入力用のポップアップ ダイアログには次の要素が含まれます:

• 署名を描画するためのキャンバス要素。
• 署名の色を変更するための色のオプション。
• 署名の太さを調整するストローク スライダー。
• 署名を配置するための X 座標と Y 座標。
• PDF ドキュメントに署名を挿入するための保存ボタン。
• ダイアログを閉じるためのキャンセル ボタン。
• 署名を消去するための再描画ボタン。

HTML コード

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

マウス イベントのイベント リスナーを追加します:

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

色とストロークのオプションのイベント リスナーを追加します:

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

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

描画関数を実装します:

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

すべてのパスは drawingHistory 配列に保存されます。 redrawCanvas 関数は配列を反復処理し、キャンバス上のパスを再描画します。

「OK」、「再描画」、「キャンセル」ボタンのイベント リスナーを追加します:

editViewer.on("sign", sign);

function sign() {
    ...
}

ステップ 4: 文書に署名を挿入する

PDF ドキュメントに署名を挿入するには:

1. キャンバスを 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. 現在のページ ID とページ データを取得します:
   

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

3. 署名画像を使用して新しいスタンプの注釈を作成します:
   

   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