基于微信小程序的电子签名及图片生成
前言：随着无纸化的推广，线上办公流程逐渐大众化，在线签字、等功能极大的缩短了异地签署周期，减少项目成本。
一、项目介绍
实现在小程序内安全有效的电子签名，实名认证，图片传输。
二、相关技术
canvas：微信小程序画板签字。
NetCore Api：实现图片上传的功能。
三、小程序效果图
四、代码块
<canvas
type="2d"
id="canvas"
bindtouchmove="move"
bindtouchstart="start"
binderror="error"
style="width:{
{
width}}px;height:{
{
height}}px;">
</canvas>
<view class="btn">
<button bindtap="clearClick">重签</button>
<button bindtap="saveClick">完成签名</button>
</view>
page {
background-color: #e9f2f1;
}
.btn {
display: flex;
flex-direction: row;
justify-self: baseline;
margin: 15rpx;
}
.btn button:first-child {
color: #3fa89a;
}
.btn button:last-child {
color: white;
background-color: #3fa89a;
}
button {
width: 200rpx;
border-radius: 5rpx;
box-shadow: 0px 0px 1px 1px #c5c5c5;
}
canvas {
background-color: white;
}
const app = getApp()
Page({
data: {
canvas: '',
ctx: '',
pr:0,
width: 0,
height: 0,
first:true,
},
start(e) {
if(this.data.first){
this.clearClick();
this.setData({
first:false})
}
this.data.ctx.beginPath(); // 开始创建一个路径，如果不调用该方法，最后无法清除画布
this.data.ctx.moveTo(e.changedTouches[0].x, e.changedTouches[0].y) // 把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条
},
move(e) {
this.data.ctx.lineTo(e.changedTouches[0].x, e.changedTouches[0].y) // 增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条
this.data.ctx.stroke()
},
error: function (e) {
console.log("画布触摸错误" + e);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
this.getSystemInfo()
this.createCanvas()
},
/**
* 初始化
*/
createCanvas() {
const pr = this.data.pr; // 像素比
const query = wx.createSelectorQuery();
query.select('#canvas').fields({
node: true, size: true }).exec((res) => {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
canvas.width = this.data.width*pr; // 画布宽度
canvas.height = this.data.height*pr; // 画布高度
ctx.scale(pr,pr); // 缩放比
ctx.lineGap = 'round';
ctx.lineJoin = 'round';
ctx.lineWidth = 4; // 字体粗细
ctx.font = '40px Arial'; // 字体大小，
ctx.fillStyle = '#ecf0ef'; // 填充颜色
ctx.fillText('签名区', res[0].width / 2 - 60, res[0].height / 2)
this.setData({
ctx, canvas })
})
},
// 获取系统信息
getSystemInfo() {
let that = this;
wx.getSystemInfo({
success(res) {
that.setData({
pr:res.pixelRatio,
width: res.windowWidth,
height: res.windowHeight - 75,
})
}
})
},
//重签
clearClick: function () {
//清除画布
this.data.first = true;
this.data.ctx.clearRect(0, 0, this.data.width, this.data.height);
},
//保存图片
saveClick: function () {
//console.log(this.data.first); //画板是否有编辑 true 未编辑 false 已编辑
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: this.data.width,
height: this.data.height,
destWidth:this.data.width*this.data.pr,
destHeight: this.data.height*this.data.pr,
canvasId: 'canvas',
canvas: this.data.canvas,
fileType: 'png',
success(res) {
//图片上传
wx.uploadFile({
url:'/api/Common/UploadImages', //接受图片的接口地址
filePath: res.tempFilePath,
name: 'file',
formData: {
'user': 'test'
},
success (res){
console.log(res);
const data = res.data
//do something
}
})
//保存图片到相册
// wx.saveImageToPhotosAlbum({
// filePath: res.tempFilePath,
// success(res) {
// wx.showToast({
// title: '保存成功',
// icon: 'success'
// })
// }
// })
}
})
},
})