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