ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript を使用してオンライン電子署名ツールを構築する
JavaScript を使用してオンライン電子署名ツールを構築する
- WBOYオリジナル
- 2023-08-09 12:01:051465ブラウズ
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 サイトの他の関連記事を参照してください。