signature----HTML5 canvas签名插件使用指南

项目的github地址： https://github.com/szimek/signature_pad

第一步：

项目引入

第二步：

代码引入

　　

初始化：

　　

　　相关配置参数可以参考API

　　它是需要基于canvas的，所以需要有

　　

 

做完以上操作，接着就是如何处理签名图片了

第三步：

　　处理代码如下

     // 使用isEmpty方法判断签名是否为空
      if (this.signaturePad.isEmpty()) {
        this.$toast.error('请签名')
        return
      }
      // 使用canvas的toDataURL方法返回一个包含图片展示的 data URI
      const data = this.signaturePad.toDataURL()
      // dataURLToBlob方法将数据转化为Blob类型
      const myBlob = this.dataURLToBlob(data)
      const formData = new FormData()
      // 在fromData中添加Blob类型的内容
      formData.append('uploadFile', myBlob, 'sig.png')
      // 然后就可以拿formData去上传啦 

dataURLToBlob方法：

dataURLToBlob (dataURL) {
      // Code taken from https://github.com/ebidel/filer.js
      var parts = dataURL.split(';base64,')
      var contentType = parts[0].split(':')[1]
      var raw = window.atob(parts[1])
      var rawLength = raw.length
      var uInt8Array = new Uint8Array(rawLength)
      for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], { type: contentType })
    },