扫码签名

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

最近有一个需求：用手机扫描PC端的二维码进行手写签名。
虽然我没做类似的需求，但是当时第一反应是需要用到canvas，这我不会啊，怎么搞，然后就在github上找找有没有类似的插件，欸 找到了 vue-esign（感谢作者）。文档写的非常详细，照着做就可以了。

PC端

我们先写PC端生成二维码的部分。生成二维码我用的是 vue-qr。（感谢作者）

安装

npm install vue-qr --save

引入

import vueQR from 'vue-qr';

使用

<vue-qr :bgSrc='src' :logoSrc="src2" text="Hello world!" :size="200"></vue-qr>
<vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr>

参数很多，感兴趣的童鞋可以直接点击上面的链接查看。

下面是完整的代码

<template>
  <div class="QianMingCeShi">
    <el-button size='mini' @click="showQrcodeFn">手写签名</el-button>
    <div id="qrcode" v-if="showQrcode">
      <vueQR :size='size' text='www.baidu.com'></vueQR>
    </div>
    <img :src="imgBase64" alt="">
  </div>
</template>

<script>
import vueQR from 'vue-qr';

export default {
  name: 'qrcode',
  data() {
    return {
      size: 200, // 二维码大小
      showQrcode: false,
      text: 'www.baidu.com',
      imgBase64: '',
    }
  },
  components: {
    vueQR,
  },
  methods: {
    showQrcodeFn() {
      this.showQrcode = true;
    },
  },
}
</script>

APP部分

安装

npm install vue-esign --save

使用

1、在用到的文件里引入，也可以在main.js里全局引入

import vueEsign from 'vue-esign'
Vue.use(vueEsign)

2、使用方法

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

<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />

属性说明

3、内置方法

两个内置方法，通过给组件设置 ref 调用：

// 清空画布
this.$refs.esign.reset()

// 生成图片
this.$refs.esign.generate().then(res => {
  console.log(res) // base64图片
}).catch(err => {
  alert(err) // 画布没有签字时会执行这里 'Not Signned'
})

下面是我的完整代码

HTML部分

 <div class="canvasBox">
  <vueEsign ref="esign" :isCrop='isCrop' :lineWidth='lineWidth' :lineColor='lineColor' :bgColor.sync='bgColor'></vueEsign>
</div>
<div class="btn">
  <van-button type="info" @click="handleReset">重写</van-button>
  <van-button type="info" @click="handleGenerate">保存/生成图片</van-button>
  <van-button plain type="info">取消</van-button>
</div>

JS部分

import vueEsign from 'vue-esign'
import { Button } from 'vant';
import { Notify } from 'vant';

Vue.use(vueEsign)
Vue.use(Button);
Vue.use(Notify);

export default {
  data() {
    return {
      isCrop: false,
      lineWidth: 6,
      lineColor: '#000',
      bgColor: '',
      autographImg: '',
    }
  },
  methods: {
    handleReset() {
      this.$refs.esign.reset();
    },
    handleGenerate() {
      this.$refs.esign.generate().then((res) => {
        this.autographImg = res;
      }).catch((err) => {
        console.log(err);
        Notify({ type: 'warning', message: '请签名签名后再保存' });
      });
    },
  },
}