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'})}}