コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > HTMLnd JavaScript を使用して PDF ドキュメントに署名を挿入する方法

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

Linda Hamilton
リリース： 2024-12-15 06:23:15
オリジナル
325 人が閲覧しました

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

    How to Insert Signatures into PDF Documents with HTMLnd JavaScript

  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="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;
      ログイン後にコピー

    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();
});
      ログイン後にコピー

      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 サイトの他の関連記事を参照してください。

    ソース：dev.to
    前の記事：JavaScript を使用してテキスト入力で Enter キーを押してボタンのクリックをトリガーするにはどうすればよいですか? 次の記事：JavaScript で空、未定義、または Null 文字列を効果的にチェックするにはどうすればよいですか?
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
    から 2024-04-29 11:01:01
    0
    3
    2192
    Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
    から 2024-04-23 00:22:19
    0
    11
    2340
    子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
    から 2024-04-19 15:37:47
    0
    1
    1963
    親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
    から 2024-04-18 23:52:34
    0
    1
    1851
    CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
    から 2024-04-16 10:10:18
    0
    0
    1908
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート