原創(chuàng)文章，轉(zhuǎn)載請注明原文章地址逮诲，謝謝幽告！
這里演示如何在webapp中簽名。
- Autograph.vue電子簽名
<template>
<div class="hello">
<canvas id ="canvas" style="background-color: #fff" @touchmove.prevent>Canvas畫板</canvas>
<div class="btnBox">
<button @click="clear">清除</button>
<button @click="save">確定</button>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
var draw
var isDraw = 0
var preHandler = function (e) {
e.preventDefault()
}
class Draw {
constructor (el) {
this.el = el
this.canvas = document.getElementById('canvas')
this.cxt = this.canvas.getContext('2d')
this.stage_info = this.canvas.getBoundingClientRect()
this.path = {
beginX: 0,
beginY: 0,
endX: 0,
endY: 0
}
isDraw = 0
this.canvas.width = document.body.clientWidth
this.canvas.height = document.body.clientHeight
alert('請用真實(shí)姓名簽名')
}
init (btn) {
var that = this
this.canvas.addEventListener('touchstart', function (event) {
document.addEventListener('touchstart', preHandler, false)
that.drawBegin(event)
})
this.canvas.addEventListener('touchend', function (event) {
document.addEventListener('touchend', preHandler, false)
that.drawEnd()
})
this.clear(btn)
}
drawBegin (e) {
var that = this
window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty()
this.cxt.fillStyle = '#FFF'
this.cxt.strokeStyle = '#000'
this.cxt.beginPath()
this.cxt.moveTo(
e.changedTouches[0].clientX - this.stage_info.left,
e.changedTouches[0].clientY - this.stage_info.top
)
this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left
this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top
this.canvas.addEventListener('touchmove', function () {
that.drawing(event)
})
}
drawing (e) {
this.cxt.lineTo(
e.changedTouches[0].clientX - this.stage_info.left,
e.changedTouches[0].clientY - this.stage_info.top
)
this.path.endX = e.changedTouches[0].clientX - this.stage_info.left
this.path.endY = e.changedTouches[0].clientY - this.stage_info.top
this.cxt.stroke()
isDraw = isDraw + 1
}
drawEnd () {
document.removeEventListener('touchstart', preHandler, false)
document.removeEventListener('touchend', preHandler, false)
document.removeEventListener('touchmove', preHandler, false)
}
clear (btn) {
this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height)
}
save () {
let imgBase64 = this.canvas.toDataURL()
return imgBase64
}
}
?
export default {
data () {
return {
msg: '',
val: true,
url: ''
}
},
mounted () {
draw = new Draw('canvas')
draw.init()
},
computed: {
...mapState(['autographButton', 'autographImg'])
},
methods: {
clear: function () {
draw.clear()
isDraw = 0
},
save: function () {
if (isDraw > 50) {
let data = draw.save()
this.url = data
this.$router.go(-1)
let value = 'true'
sessionStorage.setItem('true', value)
sessionStorage.setItem('autoimg', data)
this.$store.state.autographButton = '簽名完成'
this.$store.state.autographImg = '簽名完成'
console.log(this.$store.state.autographButton + '-----' + '簽名已完成')
} else {
alert('請簽名后在提交')
}
}
}
}
</script>
?
<style scoped>
#canvas {
cursor: default;
}
.btnBox{
width: 100%;
height: 120px;
background: #EEEEEE;
position: fixed;
bottom: 0;
}
.btnBox button:first-of-type{
border: none;
background: transparent;
border-radius: 4px;
padding: 5px 10px;
font-size: 32px;
outline: none;
color: #F00000;
float: left;
margin-left: 98px;
line-height: 120px;
transform: rotate(90deg);
}
.btnBox button:last-of-type{
border: none;
background: transparent;
border-radius: 4px;
padding: 5px 10px;
font-size: 32px;
outline: none;
color: #1CAC3E;
float: right;
margin-right: 98px;
line-height: 120px;
transform: rotate(90deg);
}
</style>
?
2. 簽名演示
image
