vue-esign签字板,鼠标写名,支持PC\移动端,返回base64或者file格式的文件流

vue里实现鼠标签名,支持PC\移动端,返回base64或者file格式的文件流
1 、安装插件 vue-esign

npm install vue-esign --save

2、在main.js引用

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

3、页面中使用

<vue-esign id='canvas' ref="esign" :width='1000' :height="500" style="border: 1px dashed #c2c1c1;" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
<div style="text-align:center;line-height:50px; ">
     <el-button style="margin: 0px 20px;" @click="handleReset" size="small">清空</el-button>
     <el-button style=" margin: 0px 20px;" type="primary" @click="handleGenerate" size="small">保存</el-button>
</div>
 
 
引入地址
 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、图例

开源地址:

示例DEMO