JS实现电子签名

效果图

代码实现

<template>
    <section class="signature">
        <div class="signatureBox">
            <div class="canvasBox" ref="canvasHW">
                <canvas @touchstart='touchStart'
                        @touchmove='touchMove'
                        @touchend='touchEnd'
                        ref="canvasF"
                        @mousedown="mouseDown"
                        @mousemove="mouseMove"
                        @mouseup="mouseUp"></canvas>
                <div class="btnBox">
                    <van-button
                        type="default"
                        @click="overwrite"
                        >重写</van-button>
                    <van-button
                        size="small"
                        type="primary"
                        @click="commit"
                        >
                          
                        提交签名
                    </van-button>
                </div>   
            </div>
        </div>
    </section>    
</template>

<script>
import {NavBar} from 'vant'
import axios from 'axios'
import AliOSS from 'ali-oss'
import ImageCompressor from 'image-compressor.js'
import {signContract} from '@/const/api'
export default {
  name: 'signature',
  components: {
    'van-nav-bar': NavBar
  },
  head() {
    return {title: '签名'}