本文共 2150 字，大约阅读时间需要 7 分钟。

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、图例

转载地址：http://asnv.baihongyu.com/