vue 实现手写电子签名/生成图片

效果图：

 下载依赖：

 npm install vue-esign --save

引入依赖（main.js引入）：

import vueEsign from 'vue-esign'

Vue.use(vueEsign)

 

HTML：

 <div class="esignTest">
        <div class="design-set">
            <vue-esign ref="esign" :width="800" :height="300"

                                             :isCrop="isCrop"

                                             :lineWidth="lineWidth"

                                             :lineColor="lineColor"

                                             :bgColor.sync="bgColor"/>
        </div>
        <button @click="handleReset" class="reset-btn">清空画板</button>
        <button @click="handleGenerate" class="set-img-btn">生成图片</button>
    </div>

js：

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


   methods: {

            //清空
            handleReset() {
                this.$refs.esign.reset()
            },

            //转换图片
            handleGenerate() {
                this.$refs.esign.generate().then(res => {
                    this.resultImg = res
                }).catch(err => {
                    alert(err) // 画布没有签字时会执行这里 'Not Signned'
                })
            }

        }