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

効果