ホームページ >ウェブフロントエンド >jsチュートリアル >HTMLnd JavaScript を使用して PDF ドキュメントに署名を挿入する方法

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

Linda Hamiltonオリジナル: 2024-12-15 06:23:15328ブラウズ

電子署名は、個人が文書に電子的に署名できるようにする手書き署名のデジタル形式です。企業や組織にとって署名プロセスを合理化するために不可欠なツールとなっており、世界中のどこからでも数回クリックするだけで文書に署名できるようになります。この記事では、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: ソースコードを取得する

GitHub リポジトリからソースコードのクローンを作成します:
```
git clone https://github.com/yushulx/web-twain-document-scan-management.git
```

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

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

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

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

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

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

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

How to Insert Signatures into PDF Documents with HTMLnd JavaScript

署名ボタンを定義し、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,
    ],
};

署名ボタンのクリックイベントハンドラーを追加します:
```
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 ドキュメントに署名を挿入するには:

キャンバスを 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;

現在のページ ID とページデータを取得します:

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

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

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

How to Insert Signatures into PDF Documents with HTMLnd JavaScript

ソースコード

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

以上がHTMLnd JavaScript を使用して PDF ドキュメントに署名を挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html5 css html Array define for Directory using Event JS function this canvas input github visual studio visual studio code https

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript を使用してテキスト入力で Enter キーを押してボタンのクリックをトリガーするにはどうすればよいですか?次の記事：JavaScript を使用してテキスト入力で Enter キーを押してボタンのクリックをトリガーするにはどうすればよいですか?

続きを見る