この記事では、モバイル署名機能を実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...
Ubuntu仮想マシンでのシリアル通信にcutecomを使用する1. cutecomをインストールす...
目次1. 事務:取引の 4 つの主な特徴:同時トランザクションはどのような問題を引き起こしますか? ...
著者は1年以上マイクロフロントエンドプロジェクトに取り組んできました。チームは10個のマイクロアプリ...
この記事では、9グリッドクリックの色変更効果を実現するためのJavaScriptの具体的なコードを参...
proxy_intercept_errors と recursive_error_pages を使...
データのバックアップと復元パート2は次のとおりです基本的な概念:バックアップ、現在のデータまたはレコ...
この記事では、棒グラフの動的な表示を実現するためのvue echartsの具体的なコードを参考までに...
説明: 指定された時間内に前のノードのコンテンツを置き換えるタイマーを設定します。 1. キーコード...
コードをコピーコードは次のとおりです。高さ:自動 !重要;高さ:550px;最小高さ:550px; ...
目次ライフサイクルの変化反応的な参照vue2.x では ref を使用して要素タグを取得します。vu...
3回の暗記により、大量の資材の正確な場所と目的を記憶でき、その使いやすさが向上します。 これは単なる...
目次1. シグナルリスト1.1. リアルタイム信号と非リアルタイム信号1.2 信号ステータス1.3 ...
この記事では、25 の有名な Web サイト (Google、Yahoo、Twitter、Digg ...
目次インストールの前提条件ステップ1: システムの残りを確認してクリアし、Dockerの依存関係をイ...