JavaScript を使用してオンライン電子署名ツールを構築する-jsチュートリアル-php.cn

JavaScript を使用してオンライン電子署名ツールを構築する

WBOY

リリース： 2023-08-09 12:01:05

オリジナル

1482 人が閲覧しました

JavaScript を使用してオンライン電子署名ツールを構築する

デジタル時代の到来により、電子署名はビジネスコミュニケーションの高速、便利、安全な方法になりました。オンライン電子署名ツールを開発する場合、JavaScript が強力な言語の選択肢となることは間違いありません。この記事では、JavaScript を使用してシンプルかつ強力なオンライン電子署名ツールを構築する方法をコード例とともに紹介します。

始める前に、いくつかの概念を理解する必要があります。一般に、電子署名には、画像ベースの署名とベクトルグラフィックベースの署名の 2 種類があります。前者はユーザーの実際の署名画像を Web ページに表示しますが、後者は JavaScript を使用して署名グラフィックを描画します。この記事では、ベクトルグラフィックベースの署名を使用します。

まず、基礎となる HTML ページが必要です。ページ上に、ユーザーが署名を描くためのキャンバス要素を配置します。コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>在线电子签名工具</title>
    <script src="signature.js"></script>
</head>
<body>
    <h1>在线电子签名工具</h1>
    <canvas id="signatureCanvas"></canvas>
    <button onclick="clearSignature()">清除签名</button>
    <button onclick="saveSignature()">保存签名</button>
    <img  id="savedSignature" / alt="JavaScript を使用してオンライン電子署名ツールを構築する" >
</body>
</html>

ログイン後にコピー

次に、署名描画ロジックを処理するための JavaScript ファイルが必要です。コードは次のとおりです。

const canvas = document.getElementById('signatureCanvas');
const context = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;

canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    [lastX, lastY] = [e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop];
});

canvas.addEventListener('mousemove', (e) => {
    if (!isDrawing) return;
    const x = e.clientX - canvas.offsetLeft;
    const y = e.clientY - canvas.offsetTop;
    context.beginPath();
    context.moveTo(lastX, lastY);
    context.lineTo(x, y);
    context.stroke();
    [lastX, lastY] = [x, y];
});

canvas.addEventListener('mouseup', () => {
    isDrawing = false;
});

function clearSignature() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function saveSignature() {
    const image = document.getElementById('savedSignature');
    image.src = canvas.toDataURL();
}

ログイン後にコピー

上記のコードでは、最初に Canvas 要素とそのコンテキストオブジェクトを取得します。次に、マウスイベントをリッスンして、ユーザーの署名の描画位置を取得しました。マウスダウンイベントで、ユーザーの最後の点の座標の記録を開始します。マウス移動イベントでは、記録された座標と現在の座標に基づいて署名グラフィックを描画します。マウスリリースイベントで、ユーザーの署名描画の記録を停止します。最後に、署名をクリアする関数と署名を保存する関数を提供し、後者は署名によって生成された DataURL を画像要素に割り当てて署名を表示します。

最後に、ページを美しくするために外部 CSS ファイルを導入する必要があります。必要に応じてスタイルをカスタマイズできます。サンプルコードは以下のとおりです。

canvas {
    border: 1px solid #000;
    cursor: crosshair;
}

button {
    margin-top: 10px;
}

ログイン後にコピー

以上の手順により、簡単なオンライン電子署名ツールを構築することができました。ユーザーは、キャンバス上に独自の署名を描画し、[クリア] ボタンで署名をクリアし、[保存] ボタンで署名を画像として保存できます。開発者は、署名検証の追加や署名のバックエンドサーバーへの保存など、ビジネスニーズに応じて機能を拡張できます。

概要: JavaScript を使用してオンライン電子署名ツールを構築すると、最新のビジネスコミュニケーションに利便性とセキュリティを提供できます。この記事で提供されているコード例を通じて、開発者は強力なオンライン電子署名ツールを迅速に実装し、ビジネスニーズに応じて拡張できます。

上記は JavaScript を使用したオンライン電子署名ツールの構築に関する記事です。読者の皆様のお役に立てれば幸いです。

以上がJavaScript を使用してオンライン電子署名ツールを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。