jquery实现手写签名

张振涛，代码界的搬运工

已于 2024-01-17 16:28:25 修改

阅读量676

点赞数 7

文章标签： jquery 前端 javascript html

于 2024-01-09 11:36:26 首次发布

本文链接：https://blog.csdn.net/m0_63873004/article/details/135476458

版权

jquery实现手写签名，引入插件之后，自己稍微处理一下。下面代码实现了清空签名，导出图片，点击提交图片格式是base64的。

使用的插件名称官网地址：jSignature

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>签名页面</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jSignature/2.1.3/jSignature.min.js"></script>
  <style>
    #signature {
      border: 1px solid #ccc;
    }
  </style>
</head>

<body>
  <div id="signature"></div>
  <button id="clearBtn">清空</button>
  <button id="exportBtn">导出图片</button>
  <button id="submitBtn">提交</button>
  <script>
    $(function () {
      var $signature = $("#signature");
      $signature.jSignature();
      // var $signature = $("#signature").jSignature();
      // 清空
      $("#clearBtn").click(function () {
        $signature.jSignature("reset");
      });
      // 保存图片
      $("#exportBtn").click(function () {
        var dataUrl = $signature.jSignature("getData");
        var link = document.createElement("a");// 创建一个虚拟链接
        link.href = dataUrl;
        link.download = "signature.png"; // 设置下载的文件名，可以根据需要进行修改
        link.click();// 执行点击事件触发下载
      });
      // 提交按钮
      $("#submitBtn").click(function () {
        var dataUrl = $signature.jSignature("getData");
        console.log(dataUrl);
        // 发送数据
        // $.ajax({
        //   url: "/",
        //   method: "POST",
        //   data: {
        //     image: dataUrl
        //   },
        //   success: function (response) {
        //     console.log(response);
        //   },
        //   error: function (error) {
        //     console.log(error);
        //   }
        // });
      });
    });
  </script>
</body>

</html>