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

npm install vue-esign --save
 
  1. 在main.js中

  2. Vue.use(vueEsign)

 

 
  1. <vue-esign ref="esign"

  2. style="width:100%;height:83vh !important;border-bottom: 1px dashed #c2c1c1;"

  3. :isCrop="isCrop"

  4. :lineWidth="lineWidth"

  5. :lineColor="lineColor"

  6. :bgColor.sync="bgColor" />

  7.  
  8. <div class="btn">

  9. <button @click="handleReset">重置</button>

  10. <button @click="handleGenerate">确定</button>

  11. </div>

 
  1. handleReset () { // 清除

  2. this.$refs.esign.reset()

  3. },

  4. handleGenerate () { // 获取base64

  5. var _this = this

  6. _this.$refs.esign.generate().then(res => {

  7. // 转成文件

  8. var blob = _this.dataURLtoBlob(res)

  9. var tofile = _this.blobToFile(blob, '签名.jpg')

  10. console.log(tofile)

  11. setTimeout(async () => {

  12. const formData = new FormData()

  13. formData.append('file', tofile, tofile.name)

  14. formData.append('fileType', 9)

  15. // ajax 请求

  16. })

  17. }).catch(err => {

  18. _this.$toast(err) // 画布没有签字时会执行这里 'Not Signned'

  19. })

  20. },

  21. // 将base64转换为blob

  22. dataURLtoBlob (dataurl) {

  23. var arr = dataurl.split(',')

  24. var mime = arr[0].match(/:(.*?);/)[1]

  25. var bstr = atob(arr[1])

  26. var n = bstr.length

  27. var u8arr = new Uint8Array(n)

  28. while (n--) {

  29. u8arr[n] = bstr.charCodeAt(n)

  30. }

  31. return new Blob([u8arr], { type: mime })

  32. },

  33. // 将blob转换为file

  34. blobToFile (theBlob, fileName) {

  35. theBlob.lastModifiedDate = new Date()

  36. theBlob.name = fileName

  37. return theBlob

  38. },

 

返回的是base64 所以要转码

具体看官方文档

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

转载:https://blog.csdn.net/qq_42092177/article/details/106474091

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值