一、微信小程序
<template>
<div class="bmxt box-jwbs">
<div class="content-jwbs">
<div>
请在下面方框中使用正楷字体签名
</div>
<div class="box-autograph">
<canvas
class="firstCanvas"
canvas-id="firstCanvas"
@touchmove="move"
@touchend="end"
@error="error"
disable-scroll="true"
>
</canvas>
</div>
</div>
<div class="bottom-jwbs">
<van-button
class="b-btn btn-jwbs"
type="primary"
size="small"
@click="clearClick()"
>重 置</van-button
>
<van-button
class="b-btn btn-jwbs"
type="info"
size="small"
@click="saveClick"
>确 认</van-button
>
</div>
</div>
</template>
<script>
import store from '@/store/store'
let content = null
let touchs = []
let lineTouchs = []
let canvasw = 0
let canvash = 0
wx.getSystemInfo({ // 获取系统信息
success: function(res) {
canvasw = res.windowWidth // 可使用窗口宽度,单位px
canvash = res.windowHeight // 可使用窗口高度,单位px
}
})
export default {
data() {
return {
allTochs: []
}
},
onLoad() { // 初始化画布
content = wx.createCanvasContext('firstCanvas', this)
content.setStrokeStyle('#000000')
content.setLineWidth(5)
content.setLineCap('round')
content.setLineJoin('round')
},
methods: {
error(e) {
wx.showModal({
title: '错误'
})
},
move(e) { // 移动
let point = { x: e.touches[0].x, y: e.touches[0].y }
touchs.push(point)
lineTouchs.push(point)
if (touchs.length >= 2) {
this.draw(touchs)
}
},
end(e) {
this.allTochs.push(JSON.parse(JSON.stringify(lineTouchs)))
lineTouchs = []
for (let i = 0; i < touchs.length; i++) {
touchs.pop()
}
},
clearClick() { // 清除
content.clearRect(0, 0, canvasw, canvash)
content.draw(true)
this.allTochs = []
},
saveClick() { // 保存图片
let that = this
wx.canvasToTempFilePath({
canvasId: 'firstCanvas',
x: 0,
y: 0,
width: canvasw,
height: canvash,
success: function(res) {
wx.getFileSystemManager().readFile({
filePath: res.tempFilePath, //图片路径
encoding: 'base64', //编码格式
success: res => {
console.log(res.data)
},
fail: function(res) {
console.log(res)
}
})
},
fail: function(res) {
console.log(res)
}
})
},
draw(touchs) {
let point1 = touchs[0]
let point2 = touchs[1]
touchs.shift()
content.moveTo(point1.x, point1.y)
content.lineTo(point2.x, point2.y)
content.stroke()
content.draw(true)
}
}
}
</script>
<style scoped>
.box-jwbs {
background: #fff;
border-radius: 6px;
margin: 10px;
padding: 20px;
height: 100%;
}
.text-top {
vertical-align: middle;
margin-left: 8px;
font-weight: 600;
}
.top-jwbs {
padding-bottom: 20px;
border-bottom: 1px solid #e7e7e7;
}
.content-jwbs {
padding-top: 17px;
color: #a9b4ba;
padding-bottom: 10px;
}
.bottom-jwbs {
display: flex;
justify-content: space-between;
}
.box-autograph {
width: 100%;
height: 400px;
}
.firstCanvas {
background-color: #fafafa;
width: 100%;
height: 390px;
border: 1px solid #e7e7e7;
margin-top: 16px;
margin-bottom: 25px;
border-radius: 6px;
}
</style>
<style>
.bottom-jwbs .van-button--info,
.bottom-jwbs .van-button--primary {
display: inline-block;
width: 140px;
}
.btn-jwbs {
display: inline-block;
}
</style>
二、Vue PC和移动端都可用
1. 按照插件
npm install vue-esign --save
2. 组件代码
<template>
<div class="bmxt box-jwbs box-autograph">
<div class="content-jwbs">
<div>请在下面方框中使用正楷字体签名后查看体检信息</div>
<vue-esign
ref="esign"
:width="800"
:height="400"
:isCrop="isCrop"
:lineWidth="lineWidth"
:lineColor="lineColor"
:bgColor.sync="bgColor"
style="border: solid 1px #000; margin: 20px 0"
/>
</div>
<div class="bottom-jwbs">
<van-button class="b-btn btn-jwbs" type="primary" size="small" @click="handleReset()">重 置</van-button>
<van-button class="b-btn btn-jwbs" type="info" size="small" @click="handleGenerate">确 认</van-button>
</div>
</div>
</template>
<script>
import VueEsign from 'vue-esign'
import { Toast } from 'vant'
import { submitAutograph } from '@/api/autograph'
import { setLocalStorage, getLocalStorage } from '@/utils/auth'
export default {
components: { VueEsign },
data() {
return {
lineWidth: 6,
lineColor: '#000000',
bgColor: '',
resultImg: '',
isCrop: false
}
},
methods: {
handleReset() {
this.$refs.esign.reset()
},
handleGenerate() {
this.$refs.esign
.generate()
.then(res => {
this.resultImg = res
})
.catch(err => {
console.log(err)
Toast.fail('请签名再提交')
})
}
}
}
</script>
<style lang="scss" scoped>
.box-autograph {
position: fixed;
left: 0;
right: 0;
top: 40px;
bottom: 0;
background: #fff;
padding: 20px;
.b-btn {
margin-bottom: 20px;
}
}
</style>