pc端，使用jsignature，实现签名功能

遇到一个需求，PC端用鼠标签名，还要有撤回功能、重置功能，最后要转换成base64格式的图片,找了很久插件，最后还是决定使用jsignature-master插件完成

下载网址：jQuery手写签名插件jSignature

代码实现：

创建对应的div 

  <div
        id="signture"
        style="
          border: 1px solid #4587ff;
          height: 190px;
          margin-left: 37px;
          margin-right: 32px;
          position: relative;
          margin-top: 10px;
        "
      >
        <div id="btn" style="position: absolute; right: 9px; bottom: 8px">
          <button
            class="reset"
            id="reset"
            style="background: #fff; border: none"
          >
            <img
              src="./images/reset.png"
              alt=""
              style="height: 18px; width: 18px"
            />
          </button>
        </div>
      </div>

对应的js代码

 <script src="./libs/jSignature.min.js"></script>

<script>
 $("#signture").jSignature({
        width: "100%", //签名区域的宽
        height: "100%", //签名区域的高
        cssclass: "zx11", //画布的类 可以写自定义的样式
        UndoButton: true, //撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找
        signatureLine: false, //去除默认画布上那条横线
        lineWidth: "2", //画笔的大小
        color: "#333333", //画笔的颜色
   });
</script>

这样简单的画布就好了

因为回退功能是自带的 所以直接用就好了，因为样式很丑，所以要自己修改这个回退按钮的样式，回退样式需要到jsignature.js里面去修改

$.fn.jSignature("addPlugin", "instance", "UndoButton", function (k) {
    this.events.subscribe("jSignature.attachingEventHandlers", function () {
      if (this.settings[k]) {
        var g = this.settings[k];
        "function" !== typeof g &&
          (g = function () {
            var g = $(
                '<button class="withdraw" id="withdraw" style="position: absolute;right: 38px; bottom: -6.5px;background:#fff;border: none;"><img src="./images/withdraw-blue.png" alt="" style="height: 18px;width: 18px;"></button>'
              ).appendTo(this.$controlbarLower),
              k = g.width();
            k !== g.width() && g.width(k);
            return g;
          });
        t.call(this, g, "jSignature", k);
      }
    });
  })

// 在引入的js文件中找到这一段代码，我引入的是jSignature.min.js，上面的button按钮就是回退按钮，修改成自己需要的样式就好了 

重置功能使用插件定义的方法调用reset就好

$("#reset").click(function () {
        var $signArea = $("#signture");
        //重置
        $signArea.jSignature("reset");
      });

最后要生成base64的的图片

如下：

 $("#sure").click(function () {
        if ($("#signture").jSignature("getData", "native").length === 0) {
          alert("请签名后再提交！");
          return;
        }
        var datapair = $("#signture").jSignature("getData", "image");
        var i = new Image();
        i.src = "data:" + datapair[0] + "," + datapair[1];
        console.log(i);
      });

 注：第一次写，本来想放图片的，结果图片上传不了。。不对的地方欢迎大家提出来。。谢谢