本项目要实现H5扫描二维码签名，首当其冲的就想到了uniapp签名，并导出图片。代码中我添加了一些注释，如果，有不懂的小伙伴，可以评论区留下一起讨论。
界面效果
签名.png
代码
<template>
<view class="content">
<page-head>
<view slot="title">签字确认</view>
</page-head>
<!-- 签字区域 -->
<canvas style="width: 100vw; height: calc(100vh - 88upx);"
canvas-id="canvasId"
@touchstart="touchstart"
@touchmove.stop.prevent="touchmove"
id="canvasId"></canvas>
<!-- 按钮确认 -->
<cover-view class="cont-btn">
<cover-view class="clear" hover-class="checkActive" @click="clear">清除</cover-view>
<cover-view class="sure" hover-class="checkActive" @click="sure">确认</cover-view>
</cover-view>
</view>
</template>
<script>
import {uploadCanvasImage, uploadCanvasImageKs, uploadCanvasImageDw, uploadCanvasImageQt} from '@/api/medical.js'
export default {
name: 'CanvasHome',
data() {
return {
context: '',
moveX: '',
moveY: '',
windowWidth: 0,
windowHeight: 0,
jid: undefined,
type: undefined,
name: undefined
}
},
onLoad: function (e) {
console.log(e)
// 获取屏幕大小
let that = this
uni.getSystemInfo({
success: function (res) {
console.log(res)
that.windowWidth = res.windowWidth
that.windowHeight = res.windowHeight
}
})
},
onReady: function (e) {
console.log(getApp().globalData, e, location)
// 创建绘图对象
let context = uni.createCanvasContext('canvasId')
// 设置线条
context.lineWidth = 4
context.setLineCap('round')
context.setLineJoin('round')
// 赋值
this.context = context
// 获取二维码中的员工工号参数
let hash = location.href.split('?')[1].split('&')
this.jid = hash[0].split('=')[1]
this.type = hash[1].split('=')[1]
this.name = hash[2].split('=')[1]
console.log(this.jid, this.type, this.name)
},
methods: {
touchstart (e) {
// 取出x、y的值
let {x, y} = e.changedTouches[0]
// 绘制线条起点
this.context.beginPath()
this.context.moveTo(x, y)
// 起点与移动的连接断开
this.moveX = ''
this.moveY = ''
},
touchmove (e) {
// 取出x, y的值
let {x, y} = e.changedTouches[0]
// 防止线条出现断点
if (this.moveX && this.moveY) {
this.context.moveTo(this.moveX, this.moveY)
this.context.lineTo(this.moveX, this.moveY)
}
this.context.lineTo(x, y)
this.moveX = x
this.moveY = y
this.context.stroke()
// ture，保留之前的内容
this.context.draw(true)
},
// 清除
clear () {
this.context.draw()
this.moveX = ''
this.moveY = ''
},
sure () {
uni.showModal({
title: '提示',
content: '您确定要提交签字么？',
success: (res) => {
if (res.confirm) {
this.signImage()
} else if (res.cancel) {
uni.showToast({
title: '已取消',
duration: 2000,
icon: 'none'
})
}
}
})
},
// 导出图片
signImage () {
let {windowWidth, windowHeight} = this
console.log(typeof windowHeight, typeof windowWidth, windowHeight, windowWidth)
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: windowWidth,
height: windowHeight,
destWidth: windowWidth,
destHeight: windowHeight,
canvasId: 'canvasId',
fileType: 'jpg',
success: (res) => {
// 在H5平台下，tempFilePath 为 base64
// console.log(res.tempFilePath)
this.uploadFile(res.tempFilePath)
},
fail: (res) => {
console.log(res)
}
})
},
// 上传文件
uploadFile(tempFilePaths) {
const baseURL = process.env.NODE_ENV === 'production' ? window.httpUrl : process.env.VUE_APP_BASE_API
uni.showLoading({
title: '加载中'
})
uni.uploadFile({
url: baseURL+`BasicConfiguration?Type=1&&MethodName=Add_Pic&&extension=.jpg`, //仅为示例，非真实的接口地址
filePath: tempFilePaths,
name: 'file',
formData: {
'user': 'test'
},
success: (uploadFileRes) => {
let imageUrl = JSON.parse(uploadFileRes.data).msg
if (this.type === 'gr') { // 个人
this.imagesToGr(imageUrl)
} else if (this.type === 'ks') {
this.imagesToKs(imageUrl)
} else if (this.type === 'dw') {
this.imagesToDw(imageUrl)
} else if (this.type === 'qt') {
this.imagesToQt(imageUrl)
}
console.log(this.type)
},
fail: (res) => {
console.log(res)
uni.hideLoading()
uni.showToast({
title: res.errMsg,
duration: 2000,
icon: none,
})
}
})
},
// 调用上传接口, 将图片给后端， 个人
imagesToGr (imageUrl) {
uploadCanvasImage(this.jid, imageUrl).then(() => {
uni.hideLoading()
uni.showToast({
title: '签字成功！',
duration: 2000
})
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 2000)
})
},
// 调用上传接口, 将图片给后端， 科室
imagesToKs (imageUrl) {
uploadCanvasImageKs(this.jid, imageUrl).then(() => {
uni.hideLoading()
uni.showToast({
title: '签字成功！',
duration: 2000
})
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 2000)
})
},
imagesToDw (imageUrl) { // 党委
uploadCanvasImageDw(this.jid, imageUrl).then(() => {
uni.hideLoading()
uni.showToast({
title: '签字成功！',
duration: 2000
})
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 2000)
})
},
imagesToQt (imageUrl) { // 其它
alert(this.name+'|' +imageUrl + '@')
uploadCanvasImageQt(this.jid, this.name+'|' +imageUrl + '@').then(() => {
uni.hideLoading()
uni.showToast({
title: '签字成功！',
duration: 2000
})
setTimeout(() => {
window.close()
}, 2000)
})
}
}
}
</script>
<style scoped>
.content{
background-color: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 45;
}
.cont-btn{
position: fixed;
z-index: 2;
bottom: 0;
right: 16upx;
display: flex;
align-items: center;
}
.clear, .sure{
padding: 16upx 48upx;
border: 1px solid #eee;
border-radius: 50upx;
margin: 24upx 8upx;
background-color: #fff;
}
.clear{
border-color:$uni-color-error;
color: $uni-color-error;
}
.sure{
border-color:$uni-color-primary;
color: $uni-color-primary;
}
.checkActive, .clear:hover, .sure:hover{
opacity: $uni-opacity-disabled;
}
</style>
说明
签字的时候页面容易滑动，所以，我们需要先新建一个界面，然后，再跳转到签字界面，并且，签字界面需要配置上禁止滚动的属性
