效果图
代码实现
<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: '签名'}