vue 手写签字功能实现，自定义画笔粗细，画布背景~~~

安装： npm install vue-esign --save

在main.js 中引入：

import vueEsign from 'vue-esign'

Vue.use(vueEsign)

页面实现：

 

 

   

     

       

     

       

     

       

     

       

            :width="800"

            :height="300"

            :isCrop="isCrop"

            :lineWidth="lineWidth"

            :lineColor="lineColor"

            :bgColor="bgColor" />

 

    清空画板

    生成图片

js:

data () {

return {

lineWidth:2,

    lineColor:'#000000',

    bgColor:'#e5e5e5',

    resultImg:'',

    isCrop:true,

    content:'',

    editorOption: {},

    params: []

}

},

methods: {

    handleReset () {//清空画板

  this.$refs.esign.reset()

        //还原默认值

          this.resultImg =''

          this.lineColor ='#000000'

          this.bgColor ='#e5e5e5'

          this.lineWidth ='2'

    },

    handleGenerate () {

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

            this.resultImg = res

         }).catch(err => {

            alert(err)// 画布没有签字时会执行这里'Not Signned'

          })

},

},

效果