首页 > 前端
在线签名-保存签名图片-清空签名-电脑端移动端都适合
来源:TP课堂 时间:2024-04-22 点击:1708

在线签名-保存签名图片-清空签名-电脑端移动端都适合


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
  <script type="text/javascript" src="https://www.francelecheng.com//static/index/js/jquery-3.4.1.min.js"></script>
</head>

<body>

  <canvas id="signature-pad" width="400" height="350" style="border: 1px solid #ddd;"></canvas>
  <div id="clear">清空画布</div>
  <div id="getSignature">保存图片</div>
  <div class="box"></div>
  <script>
    var canvas = document.getElementById('signature-pad');
    this.canvas = document.getElementById('signature-pad');
    var signaturePad = new SignaturePad(canvas);

    // 清除签名
    document.getElementById('clear').addEventListener('click', function () {
      signaturePad.clear();
    });

    // 获取签名图片的Base64编码
    document.getElementById('getSignature').addEventListener('click', function () {
      var data = signaturePad.toDataURL('image/png');
      console.log(data); // 可以将data发送到服务器端保存或用于其他用途
      $(".box").html("<img src='" + data + "'>")
    });




  </script>
</body>

</html>