vue 实现鼠标写签名（电子签名）

奔跑得蜗牛

1 、安装插件 vue-esign

npm install vue-esign --save

2、在main.js引用

import vueEsign from 'vue-esign'
Vue.use(vueEsign)

3、页面中使用

     清空
     保存



引入地址
 import {baseUrl} from '@/utils/env.js';


data () {
  return {
    lineWidth: 6,
    lineColor: '#000000',
    bgColor: '',
    resultImg: '',
    isCrop: false
  }
},

4、返回数据为base64   具体看你返回得数据  

    
            handleGenerate() { // 获取base64
                var _this = this
                _this.$refs.esign.generate().then(res => {
                    // 转成文件
                    var blob = _this.dataURLtoBlob(res)
                    var tofile = _this.blobToFile(blob, '签名.jpg')
                    setTimeout(async () => {
                        const formData = new FormData()
                        formData.append('file', tofile, tofile.name)
                        formData.append('fileType', 9)
                        // ajax 请求
                    })
                }).catch(err => {
                     // 画布没有签字时提示
                     this.$notify({
                        title: '提示',
                        message: '失败',
                        type: 'warning'
                    });
                })
            },
            // 将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
            },

5、清除

 handleReset() { // 清除
                if (this.$refs.esign) {
                    this.$refs.esign.reset();
                }
                var obj = document.getElementById("canvas");
                obj.style.backgroundColor = "#fff";  保存时背景
            },

6、图例