Signature Pad 使用

實現功能

• 能夠在移動設備上實現電子簽名，並保存為圖片

git地址

• https://github.com/szimek/signature_pad

參數說明

• dotSize：點的大小（在屏幕上點擊留下的點大小，單位：px）
• minWidth： 線的最小寬度（單位：px，默認：0.5）
• maxWidth：線的最大寬度（單位：px，默認：2.5）
• throttle：節流（每次繪制兩個點之間的時間，單位：ms，默認：16，注意：設置過大會顯得很卡頓）
• minDistance：最小距離（每次繪制兩個點之間的最小距離，單位：px，默認：5）
• backgroundColor：背景色（默認：#000）
• penColor：線條顏色（默認：#fff）
• velocityFilterWeight：根據速度控制線的weight（默認：0.7）
• onBegin：一筆開始時觸發的事件
• onEnd：一筆結束時觸發的事件

API說明

• toDataURL()：保存為圖片，默認保存為png，toDataURL("image/jpeg")-保存為jpg，toDataURL("image/svg+xml")-保存為svg
• isEmpty()：簽名是否為空
• clear()：清空簽名
• toData()：返回簽名點的數組
• fromData()：
• off()：解綁所有事件
• on()：重新綁定所有事件

調整畫布尺寸

• 給畫布設置一個固定大小，有時簽名會呈現一個被拉伸的狀態，這是需要重新調整簽名的尺寸，官方給出了方法，直接粘貼代碼即可。

function resizeCanvas() {
    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
    signaturePad.clear(); // otherwise isEmpty() might return incorrect value
}

window.addEventListener("resize", resizeCanvas);
resizeCanvas();

使用中遇到的問題

1. 安裝依賴后報錯

• v3.0.0-beta.3版本有問題，建議使用v2.3.0（官方demo使用的是v2.3.0，或者直接用demo中的js）

2. 保存后圖片背景色為黑色

• 這個問題主要是有兩個方面造成的：一個是插件默認為黑色透明的背景色；一個是我保存了jpg格式的。
• 如果想要透明背景色，直接保存為png格式，無需設置背景色，用默認的即可。

使用代碼

• 我是在angular1.X中用的

# index.html
<script type="text/javascript" src="js/lib/signature_pad.js"></script>

# signature.html
<span id="selfSign"></span>
<button class="button button-fill sign" data-action="sign">簽名</button>

# signatureCtr.js
let signButton = document.querySelector("[data-action=sign]");
let dataURL = "";
signButton.addEventListener("click", function (event) {
  SdicInterview.popup(
    '<div class="popup sign-popup">' +
    '<a class="color-indigo close-popup" data-popup=".sign-popup" style="font-size:25px;position:absolute;top:4px;right:10px;cursor:pointer;z-index:1"> <i class="fa fa-times"></i></a>' +
    '<div id="signature-pad">' +
    "<h1>專 家 簽 名</h1>" +
    '<canvas class="form-footer-signature"></canvas>' +
    '<button class="button clear" data-action="clear">清除簽名</button>' +
    '<button class="button save close-popup" data-popup=".sign-popup" data-action="save-jpg">確定</button>' +
    "</div>"
  );
  var wrapper = document.getElementById("signature-pad");
  var clearButton = wrapper.querySelector("[data-action=clear]");
  var canvas = wrapper.querySelector("canvas");
  var saveJPGButton = wrapper.querySelector("[data-action=save-jpg]");
  var signaturePad = new SignaturePad(canvas, {
    backgroundColor: "#fff",
  });

  function resizeCanvas() {
    var ratio = Math.max(window.devicePixelRatio || 1, 1);

    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);

    signaturePad.clear();
  }

  window.onresize = resizeCanvas;
  resizeCanvas();
  clearButton.addEventListener("click", function (event) {
    signaturePad.clear();
  });
  saveJPGButton.addEventListener("click", function (event) {
    if (!signaturePad.isEmpty()) {
      dataURL = signaturePad.toDataURL("image/jpeg");
      document.getElementById("selfSign").innerHTML = '<img class="sign-img-sum" id="selfSign" src="' + dataURL + '" />';
    }
  });
});