用canvas实现电子签名

功能说明：

1. 兼容 PC 和 Mobile；
2. 画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标）；
3. 自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色；
4. 支持裁剪 （针对需求：有的签字需要裁剪掉四周空白）。
5. 导出图片格式为 base64；

1. 安装使用插件===>>>  npm install vue-esign
2. main.js文件中引入 
   ​       import vueEsign from 'vue-esign'
   ​       Vue.use(vueEsign)
3. 上代码

        <template>
          <div class="home"> 
            <vue-esign
              ref="esign"
              :width="300"
              :height="300"
              :isCrop="isCrop"
              :lineWidth="lineWidth"
              :lineColor="lineColor"
              :bgColor.sync="bgColor"
            />
            <button @click="handleReset">清空画板</button>
            <button @click="handleGenerate">生成图片</button>
          </div>
        </template>

        <script>
        export default {
          data () {
            return {
              lineWidth: 6,
              lineColor: 'red',
              bgColor: '',
              resultImg: '',
              isCrop: false
            }
          },
          methods: {
            handleReset () {
              this.$refs.esign.reset()
            },
            handleGenerate () {
              this.$refs.esign
                .generate()
                .then(res => {
                  this.resultImg = res
                  console.log(res)
                })
                .catch(err => {
                  alert('hfjdksafjdksl;j') // 画布没有签字时会执行这里 'Not Signned'
                })
            }
          }
        }
        </script>
        <style lang="less" scoped>
        ::v-deep canvas[data-v-25d47434] {
          border: 1px solid red;
        }
        </style>

标签：画布,canvas,实现,res,电子签名,vueEsign,resultImg,esign
来源： https://www.cnblogs.com/lflsky-123/p/15433278.html