This is the 7th day of my participation in the August Text Challenge.More challenges in August

Recently there was a demand for a handwritten signature by scanning a QR code on a PC with a mobile phone. Although I didn’t have a similar requirement, my first thought was to use canvas, which I didn’t know how to do. Then I looked up a similar plugin on Github and found vue-esign (thanks to the author). The documentation is very detailed, so just follow it.

PC

Let’s first write the part that generates two-dimensional code on the PC side. To generate the QR code, I used vuE-QR. (Thanks to author)

The installation

npm install vue-qr --save
Copy the code

The introduction of

import vueQR from 'vue-qr';
Copy the code

use

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

Copy the code

Many parameters, interested in children’s shoes can directly click on the link above to view.

Below is the complete code

<template> <div class="QianMingCeShi"> <el-button size='mini' @click="showQrcodeFn"> 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>Copy the code

APP part

The installation

npm install vue-esign --save
Copy the code

use

1, in the used file, can also be imported globally in main.js

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

2. Method of use

Ref must be set to call the component’s two built-in methods, reset() and generate()

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

Attributes that

3. Built-in methods

Two built-in methods, called by setting ref to the component:

This.$refs.esign.generate(). Then (res => {console.log(res) // base64 image }). Catch (err => {alert(err) // If canvas is Not signed here 'Not Signned'})Copy the code

Here is my complete code

HTML part

<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> </div>Copy the code

JS part

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: 'Please sign and save'}); }); }},}Copy the code