vue 实现手写电子签名

1.兼容 PC 和 Mobile；

2.画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标偏移）；

3.自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色；

4.支持裁剪 （针对需求：有的签字需要裁剪掉四周空白）。

5.导出图片格式为base64；

6.详细出处 https://www.jianshu.com/p/cfb9d5998cd6

1.安装： npm install vue-esign --save

2.在main.js 中引入

import vueEsign from 'vue-esign'

Vue.use(vueEsign)

3.必须设置 ref ，用来调用组件的两个内置方法 reset() 和 generate()

4.页面代码如下：

<template>

    <div class="esignTest">

      <div style="border: 2px solid #E6E6E6 ;background-color: white">

          <vue-esign ref="esign" :width="800" :height="300"

                      :isCrop="isCrop"

                      :lineWidth="lineWidth"

                      :lineColor="lineColor"

                      :bgColor.sync="bgColor" />

      </div>

        <button @click="handleReset">清空画板</button>

        <button @click="handleGenerate">生成图片</button>

    </div>

</template>

<script>

    export default {

        name:'esignTest',

        data() {

            return {

                lineWidth: 6,

                lineColor: '#000000',

                bgColor: '',

                resultImg: '',

                isCrop: false

            }

        },

        created() {

        },

        mounted() {

        },

        methods:{

            handleReset () {

                this.$refs.esign.reset()

            },

            handleGenerate () {

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

                    this.resultImg = res

                }).catch(err => {

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

                })

            }

        }

    }

</script>

<style scoped lang="less">

    .esignTest{

    }

</style>