モバイル署名機能を実装する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)

推薦する

Zen Coding 簡単で素早いHTMLの書き方

禅コーディングテキストエディタプラグインです。 Zen Coding を使用するテキスト エディター...

Linux viコマンドの知識ポイントと使い方のまとめ

Linux viコマンドの詳しい説明vi エディタは、すべての Unix および Linux システ...

Linux での MySQL 8.0.11 のインストールに関するチュートリアル

1. 公式サイトにアクセスしてインストールパッケージをダウンロードしますダウンロードリンク: クリッ...

Linux で 1 回限りのスケジュールされたタスクを実行するための at コマンドの使用に関する詳細な説明

目次序文1. 一度限りの計画タスクの紹介2. コマンド3. 1回限りのスケジュールタスクを作成する4...

mysqladmin を使用して MySQL インスタンスの現在の TPS と QPS を取得する方法

mysqladmin は管理と操作を行う公式の mysql クライアント プログラムです。MySQL...

MySQL データベースは何をしますか?

MySQL はリレーショナル データベース管理システムです。リレーショナル データベースは、すべて...

CentOS に Redis と MySQL をインストールする

1|0MySQL(MariaDB) 1|11. 説明MariaDB データベース管理システムは My...

MySQL の DDL と DML についての簡単な説明

目次序文1. DDL 1.1 データベース操作1.2 データテーブルの操作1.3 一般的なデータ型1...

CUDA8.0とCUDA9.0はUbuntu16.04で共存します

序文Github にある以前のコードには、CUDA 8.0 環境が必要なものもあります。初心者の場合...

MySQLトランザクションが効率に与える影響の分析と概要

1. データベース トランザクションによりデータベースのパフォーマンスが低下します。データの一貫性と...

MySQL マルチテーブルクエリの詳細な説明

よく食べて十分に休息を取るというのは簡単なことのように思えますが、実際に実行するのはそれほど簡単では...

MySQL でストアド プロシージャを作成し、データ テーブルに新しいフィールドを追加する方法の分析

この記事では、例を使用して、MySQL でストアド プロシージャを作成し、データ テーブルに新しいフ...

実行中の時計を実装するための純粋な CSS3 コード

操作効果コードの実装html <div id="ウォッチ"> <...

MySQLのSeconds_Behind_Masterの詳細な説明

目次マスターの後ろの秒数オリジナルの実装最終マスタータイムスタンプマスターとのクロック差他の実行時間...

Linux での MySQL 5.6 バイナリのインストール プロセス

1.1 バイナリインストールパッケージをダウンロードするhttps://dev.mysql.com/...