使用jSignature.js实现电子签名

使用jSignature.js实现电子签名

2023-11-19 18:51:00

https://blog.csdn.net/weixin_45740068/article/details/129163913

https://www.mianshigee.com/project/brinley-jSignature/

https://www.erlangyun.com/p?id=164

  <script src="/javascripts/jquery.min.js"></script>
  <script src="/javascripts/jSignature.min.js"></script>

  <div class="container">
      <div id="signatureparent">
          <!--画布-->
          <div id="signature"></div>
      </div>
      <br>
      <div class="footer-btn">
          <button type="button" class="btn btn-default btn-block" id="clear">清除</button>
          <button type="button" class="btn btn-primary btn-block" id="save">预览</button>
      </div>
  </div>

  <br><br>
  <!--预览-->
  <div class="autograph">
      <img src="" href="img" style='background:white;' />
  </div>
  <br><br>

  <style type='text/css'>
  .whitee {
      background-color: 'red';
  }
  </style>

  <script>
      var param= {
          'background-color': 'aliceblue',
          width: '80%',   //签名区域的宽
          height: '50%',  //签名区域的高
          cssclass: 'whitee', //画布的类 可以写自定义的样式
          UndoButton:false,   //撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找
          signatureLine: false,   //去除默认画布上那条横线
          lineWidth: '2'  //画笔的大小
      };
      $("#signature").jSignature(param); //初始化、可设置画板参数

      //清除
      $('#clear').click(function () {
          $("#signature").jSignature("reset");
          $("[href=img]")[0].src = ''
      });

      //保存 
      $('#save').click(function () {
          // 判断是否签名
          if ( $("#signature").jSignature('getData', 'native').length === 0) {
              return alert("请先进行签名");
          }

          // 将签名的画布保存为base64编码字符串 默认是png的
          var datapair = $("#signature").jSignature("getData", "image");
          var i = new Image();
          i.src = "data:" + datapair[0] + "," + datapair[1];
          $("[href=img]")[0].src = i.src
      })
  </script>