この記事では、モバイル署名機能を実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
禅コーディングテキストエディタプラグインです。 Zen Coding を使用するテキスト エディター...
Linux viコマンドの詳しい説明vi エディタは、すべての Unix および Linux システ...
1. 公式サイトにアクセスしてインストールパッケージをダウンロードしますダウンロードリンク: クリッ...
目次序文1. 一度限りの計画タスクの紹介2. コマンド3. 1回限りのスケジュールタスクを作成する4...
mysqladmin は管理と操作を行う公式の mysql クライアント プログラムです。MySQL...
MySQL はリレーショナル データベース管理システムです。リレーショナル データベースは、すべて...
1|0MySQL(MariaDB) 1|11. 説明MariaDB データベース管理システムは My...
目次序文1. DDL 1.1 データベース操作1.2 データテーブルの操作1.3 一般的なデータ型1...
序文Github にある以前のコードには、CUDA 8.0 環境が必要なものもあります。初心者の場合...
1. データベース トランザクションによりデータベースのパフォーマンスが低下します。データの一貫性と...
よく食べて十分に休息を取るというのは簡単なことのように思えますが、実際に実行するのはそれほど簡単では...
この記事では、例を使用して、MySQL でストアド プロシージャを作成し、データ テーブルに新しいフ...
操作効果コードの実装html <div id="ウォッチ"> <...
目次マスターの後ろの秒数オリジナルの実装最終マスタータイムスタンプマスターとのクロック差他の実行時間...
1.1 バイナリインストールパッケージをダウンロードするhttps://dev.mysql.com/...