移动端电子签名

最新推荐文章于 2024-09-17 13:42:29 发布

Lee_Yu_Fan

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量38

点赞数

分类专栏： javascript 文章标签： javascript

原文链接：https://blog.csdn.net/saibeidehuangyan/article/details/107075746

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

文章转载于：https://blog.csdn.net/saibeidehuangyan/article/details/107075746

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入jquery -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js"></script>
    <script src="./jSignature.js"></script>
  </head>
  <body>
    <div class="container">
      <div id="signatureparent">
        <div id="signature"></div>
      </div>
      <br />
      <button type="button" id="save">保存</button>
      <button type="button" id="reset">重置</button>

      <!-- 保存后，通过base64展示 -->
      <img src="" alt="" id="img" />
    </div>
    <script>
      var param = {
        width: "300px", //签名区域的宽
        height: "400px", //签名区域的高
        cssclass: "canvas_box", //画布的类，可以写自定义的样式
        UndoButton: true, //撤销按钮的状态，这个按钮的样式修改要去jSignature.js
        signatureLine: false, //去除默认画布上那条横线
        lineWidth: "1", //画笔的大小
      };
      $("#signature").jSignature(param);

      //   清除API
      $("#reset").click(function () {
        $("#signature").jSignature("reset");
      });

      // 保存提交
      $("#save").click(function () {
        if ($("#signature").jSignature("getData", "native").length === 0) {
          alert("请签名后再提交!");
          return;
        }
        var com = confirm("提交后不可更改，确认提交签名？");
        if (!com) return;
        //将签名的画布保存为base64编码字符串 默认是png的
        var datapair = $("#signature").jSignature("getData", "image");
        var i = new Image();
        i.src = "data:" + datapair[0] + "," + datapair[1];
        $("#img").attr("src", i.src);
      });
    </script>
  </body>
</html>