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

版权声明：本文为CSDN博主「Rainbow_Xjj」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sky_sunshine_x/article/details/117784364