モバイル署名機能を実装するJavaScript

モバイル署名機能を実装するJavaScript

この記事では、モバイル署名機能を実装するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

1. HTML部分

<div class="mui-content-padded">
 <div class="mui-inline"><font style="font-family: '微软雅黑';font-size: 1.2rem;">受領者の署名:</font></div>
</div>
<div class="mui-content-canvasDiv" style="overflow: hidden;">
 <キャンバス id="myCanvas" 幅="660" 高さ="360" スタイル="border:1px solid #f2f2f2;"></キャンバス>
 <div class="saveimgs" id="saveImgDiv"></div>
</div>

myCanvas は署名された div であり、 saveImgDiv は保存後にエコーされる div です。

2. ページの初期化、div署名関数の追加

このメソッドは、InitThis() を呼び出します。
var マウスが押された = false;
var lastX、lastY;
var ctx = document.getElementById('myCanvas').getContext("2d");
var c = document.getElementById("myCanvas");
var 選択された1、選択された2;
関数InitThis() {
 // タッチスクリーン c.addEventListener('touchstart', function(event) {
  コンソール.log(1)
  イベントターゲットタッチの長さが1の場合
   event.preventDefault(); // ブラウザのデフォルトイベントを防止します。重要 mousePressed = true;
   描画(event.touches[0].pageX - this.offsetLeft、event.touches[0].pageY - this.offsetTop、false);
  }
 }、 間違い);
 c.addEventListener('touchmove', 関数(イベント) {
  コンソール.log(2)
  イベントターゲットタッチの長さが1の場合
   event.preventDefault(); // ブラウザのデフォルトイベントを防止します。重要 if(mousePressed) { 
    描画(event.touches[0].pageX - this.offsetLeft、event.touches[0].pageY - this.offsetTop、true);
 
   }
  }
 }、 間違い);
 c.addEventListener('touchend', 関数(イベント) {
  コンソール.log(3)
  イベントターゲットタッチの長さが1の場合
   event.preventDefault(); // 手書き中に画面がドラッグされるのを防ぐためにブラウザのデフォルト イベントを防止します。重要: mousePressed = false;
  }
 }、 間違い);
 // マウス c.onmousedown = function(event) {
  マウスが押された = true;
  描画(event.pageX - this.offsetLeft、event.pageY - this.offsetTop、false);
 };
 c.onmousemove = 関数(イベント) {
  マウスが押された場合
   描画(event.pageX - this.offsetLeft、event.pageY - this.offsetTop、true);
  }
 };
 c.onmouseup = 関数(イベント) {
  マウスが押された = false;
 };
}
 
関数Draw(x, y, isDown) {
 if(isDown) {
  ctx.beginPath();
  ctx.strokeStyle = 選択された2;
  ctx.lineWidth = 選択された1;
  ctx.lineJoin = "丸め";
  ctx.moveTo(最後のX、最後のY);
  ctx.lineTo(x, y);
  ctx.closePath();
  ctx.stroke();
 }
 最後のX = x;
 最後のY = y;
}

3. 画像のパスを取得してsaveImgDivに格納し、署名エコーロジックを実行する

var ファイル = "http://10.1.31.173:8097/upload/" + iv[0].zjqm + "?v=" + 新しい Date().getTime();
 
$("#saveImgDiv").append('<img src="'+ ファイル + '" style="background:white" width="660" height="360">');

4. ユーザー署名を保存します。これは、送信成功時の保存のコールバックに配置できます。

var saveimgs = document.getElementsByClassName("saveimgs")[0];
 
//署名画像を保存します。var image = c.toDataURL("image/png");
var ctximg = document.createElement("span");
ctximg.innerHTML = "<img src='" + image + "' alt='キャンバスから'/>";
(saveimgs.getElementsByTagName('span').length >= 1) の場合 {
 var span_old = saveimgs.getElementsByTagName("span")[0];
 saveimgs.replaceChild(ctximg,span_old)
} それ以外 {
 saveimgs.appendChild(ctximg);
}

効果

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSキャンバスは描画ボードと署名ボードの機能を実現します

<<:  Robots.txtの詳細な紹介

>>:  初心者がHTMLタグを学ぶ(2)

推薦する

フォーム送信ページの更新がジャンプしない

1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...

Ubuntu仮想マシンでシリアル通信にcutecomを使用する方法

Ubuntu仮想マシンでのシリアル通信にcutecomを使用する1. cutecomをインストールす...

MySQLデータベースのトランザクションとインデックスの詳細な説明

目次1. 事務:取引の 4 つの主な特徴:同時トランザクションはどのような問題を引き起こしますか? ...

スクリプトを使用して、ワンクリックでDockerイメージをパッケージ化してアップロードします。

著者は1年以上マイクロフロントエンドプロジェクトに取り組んできました。チームは10個のマイクロアプリ...

JavaScript は 9 グリッドのクリックによる色の変更効果を実装します

この記事では、9グリッドクリックの色変更効果を実現するためのJavaScriptの具体的なコードを参...

nginx プロキシでの複数の 302 応答の解決策 (nginx Follow 302)

proxy_intercept_errors と recursive_error_pages を使...

史上最もシンプルな MySQL データのバックアップと復元のチュートリアル (パート 2) (パート 36)

データのバックアップと復元パート2は次のとおりです基本的な概念:バックアップ、現在のデータまたはレコ...

Vue echarts は棒グラフの動的な表示を実現します

この記事では、棒グラフの動的な表示を実現するためのvue echartsの具体的なコードを参考までに...

リストループスクロールを実現するための HTML+CSS+JavaScript サンプルコード

説明: 指定された時間内に前のノードのコンテンツを置き換えるタイマーを設定します。 1. キーコード...

divコンテナ内の背景色または画像は、サイズが大きくなるにつれて大きくなります。

コードをコピーコードは次のとおりです。高さ:自動 !重要;高さ:550px;最小高さ:550px; ...

Vue3の一般的なAPIの使用方法の紹介

目次ライフサイクルの変化反応的な参照vue2.x では ref を使用して要素タグを取得します。vu...

ウェブデザイン:大量の素材の正確な配置と使用

3回の暗記により、大量の資材の正確な場所と目的を記憶でき、その使いやすさが向上します。 これは単なる...

Linuxのシグナルメカニズムについての簡単な説明

目次1. シグナルリスト1.1. リアルタイム信号と非リアルタイム信号1.2 信号ステータス1.3 ...

有名なウェブサイトのロゴに使われている25種類のフォントのコレクション

この記事では、25 の有名な Web サイト (Google、Yahoo、Twitter、Digg ...

Linux環境にDocker環境をインストールする(落とし穴なし)

目次インストールの前提条件ステップ1: システムの残りを確認してクリアし、Dockerの依存関係をイ...