微信小程序使用新版Canvas画布实现电子签名
布局文件： <view class="container column-me">
<view class="tips">
请绘制清晰可见的签名并保存
</view>
<canvas class="canvas" id="canvas" type="2d" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
<view class='addBtn'>
<button type="default" class='txt reset' bindtap="clickClear">重新签名</button>
<button type="default" class='txt' bindtap="clickSave">保存签名</button>
</view>
</view>
样式文件： page {
background: #fff;
}
.container {
padding: 0 20rpx;
height: 100vh;
background: #fff;
border-radius: 5px;
}
.canvas {
width: 100%;
flex: 1;
box-sizing: border-box;
margin-top: 10rpx;
}
.tips {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #aaa;
font-size: 20rpx;
}
.addBtn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background: #fff;
z-index: 100;
padding: 10rpx 0;
}
.addBtn .txt {
text-align: center;
width: 200rpx;
font-size: 15rpx;
border-radius: 100px;
background: #0097fe;
color: #fff;
box-sizing: border-box;
margin: 0 20rpx;
padding: 10px;
z-index: 100;
}
.reset {
background: #fff !important;
border: 1px solid #cccccc;
color: #333333 !important;
}
配置文件： {
"usingComponents": {},
"pageOrientation": "landscape",
"navigationBarTitleText": "医生签名"
}
JS文件： let http = require("../../utils/http.js");
// canvas 全局配置
var context = null; // 使用 wx.createContext 获取绘图上下文 context
var mCanvas = null;
//注册页面
Page({
/**
* 页面的初始数据
*/
data: {
userId: '', //用户id
hasDraw: false, //默认没有画
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
userId: options.scene,
hasDraw: false,
})
wx.createSelectorQuery()
.select('#canvas') // 在 WXML 中填入的 id
.fields({
node: true,
size: true
})
.exec((res) => {
// Canvas 对象
const canvas = res[0].node
mCanvas = res[0].node
// 渲染上下文
context = canvas.getContext('2d')
// Canvas 画布的实际绘制宽高
const width = res[0].width
const height = res[0].height
// 初始化画布大小
const dpr = wx.getWindowInfo().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
context.scale(dpr, dpr)
//绘制背景
context.fillStyle = '#fff'
context.clearRect(0, 0, canvas.width, canvas.height)
context.fillRect(0, 0, canvas.width, canvas.height)
})
},
onShow() {
},
canvasIdErrorCallback: function (e) {},
//开始
canvasStart: function (event) {
context.moveTo(event.touches[0].x, event.touches[0].y);
},
//过程
canvasMove: function (event) {
var x = event.touches[0].x;
var y = event.touches[0].y;
context.lineWidth = 4
context.lineCap = 'round'
context.lineJoin = 'round'
context.lineTo(x, y);
context.stroke();
this.setData({
hasDraw: true,
});
},
canvasEnd: function (event) {
},
clickClear: function () {
context.clearRect(0, 0, mCanvas.width, mCanvas.height); //清除画布
context.beginPath() //清空画笔
this.setData({
hasDraw: false,
});
},
//保存签名
clickSave: function () {
let that = this
if (!this.data.hasDraw) {
wx.showModal({
title: '提示',
content: '签名内容不能为空！',
showCancel: false
});
return false;
};
if (this.data.userId === undefined || this.data.userId === '') {
wx.showModal({
title: '提示',
content: '用户id为空，请重新扫码',
showCancel: false
});
return false;
}
//生成图片
wx.canvasToTempFilePath({
canvas: mCanvas,
success: function (res) {
http.upload({
url: '/admin/upload/upLoadFile',
filePath: res.tempFilePath,
name: 'file',
formData: {},
callBack: function (uploadRes) {
let res = JSON.parse(uploadRes)
let url = res.data.url
http.request({
url: "/doctor/home/updateSignature",
method: "POST",
noBody: true,
data: {
id: that.data.userId,
image: url,
},
callBack: (res) => {
wx.showModal({
title: '温馨提示',
content: '保存签名成功！',
confirmText: '退出',
showCancel: false,
success(res) {
if (res.confirm) {
wx.exitMiniProgram({
success: function (res) {
console.log(res)
},
fail: function (err) {
console.log(err)
}
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
})
}
})
}
})
},
})
