vue 实现手写电子签名-vue-esign

 

npm install vue-esign --save

在main.js中
Vue.use(vueEsign)

 

<vue-esign ref="esign"
                   style="width:100%;height:83vh !important;border-bottom: 1px dashed #c2c1c1;"
                   :isCrop="isCrop"
                   :lineWidth="lineWidth"
                   :lineColor="lineColor"
                   :bgColor.sync="bgColor" />

<div class="btn">
          <button @click="handleReset">重置</button>
          <button @click="handleGenerate">确定</button>
        </div>

handleReset () { // 清除
      this.$refs.esign.reset()
    },
    handleGenerate () { // 获取base64
      var _this = this
      _this.$refs.esign.generate().then(res => {
        // 转成文件
        var blob = _this.dataURLtoBlob(res)
        var tofile = _this.blobToFile(blob, '签名.jpg')
        console.log(tofile)
        setTimeout(async () => {
          const formData = new FormData()
          formData.append('file', tofile, tofile.name)
          formData.append('fileType', 9)
          // ajax 请求
        })
      }).catch(err => {
        _this.$toast(err) // 画布没有签字时会执行这里 'Not Signned'
      })
    },
    // 将base64转换为blob
    dataURLtoBlob (dataurl) {
      var arr = dataurl.split(',')
      var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },
    // 将blob转换为file
    blobToFile (theBlob, fileName) {
      theBlob.lastModifiedDate = new Date()
      theBlob.name = fileName
      return theBlob
    },

 

返回的是base64 所以要转码

具体看官方文档

https://www.npmjs.com/package/vue-esign