微信小程序实现canvas电子签名（canvas2D）
解决了无法清空画布以及手写位置偏移的问题
wxml
js
var context = null;// 使用 wx.createContext 获取绘图上下文 context
var isButtonDown = false;//是否在绘制中
var arrx = [];//动作横坐标
var arry = [];//动作纵坐标
var arrz = [];//总做状态，标识按下到抬起的一个组合
var canvasw = 0;//画布宽度
var canvash = 0;//画布高度
Page({
/**
- 页面的初始数据
*/
data: {
canvasw: '',
canvash: '',
imgUrl: '',
info: {},
signBase64: '',
sysType: '', // 判断机型
canvas: {}
},
/**
- 生命周期函数--监听页面加载
*/
onLoad(options) {
//判断画布上是否已签名
wx.setStorageSync('draw', false)
let that = this
let res = wx.getSystemInfoSync()
const system = res.system.split(' ')
that.setData({
sysType: system[0],
})
that.startCanvas();
that.initCanvas()
},
/**
- 以下 - 手写签名
*/
startCanvas() {//画布初始化执行
var that = this;
//获取系统信息
wx.getSystemInfo({
success: function (res) {
//根据需求调整
canvasw = res.windowWidth -20;
canvash = res.windowHeight;
that.setData({ canvasw: canvasw ，canvash: canvash})
}
});
this.initCanvas();
},
//初始化函数
initCanvas() {
const query = wx.createSelectorQuery()
query.select('#canvas')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
this.setData({
canvas
})
context = canvas.getContext('2d')
if (this.data.sysType == 'iOS') {
context.fillStyle = 'rgba(255, 255, 255, 1)';
context.strokeStyle='#444';
} else {
context.fillStyle = 'rgba(0, 0, 0, 1)';
context.strokeStyle='#aaa';
}
context.lineWidth=4;
context.lineCap='round';
context.lineJoin='round';
//设置width和height手写位置才不会发生偏移
canvas.width = res[0].width
canvas.height = res[0].height
})
},
canvasStart(event) {
//要添加 context.beginPath()后面才能清空画布
context.beginPath()
isButtonDown = true;
arrz.push(0);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
//画布上有东西了
wx.setStorageSync('draw', true)
},
canvasMove(event) {
if (isButtonDown) {
arrz.push(1);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
}
for (var i = 0; i < arrx.length; i++) {
if (arrz[i] == 0) {
context.moveTo(arrx[i], arry[i])
} else {
context.lineTo(arrx[i], arry[i])
}
}
context.clearRect(0, 0, context.width, context.height);
if (this.data.sysType === 'iOS') {
context.fillStyle = 'rgba(255, 255, 255, 1)';
context.strokeStyle='#444';
} else {
context.fillStyle = 'rgba(0, 0, 0, 1)';
context.strokeStyle='#aaa';
}
context.lineWidth=3;
context.lineCap='round';
context.lineJoin='round';
context.stroke();
// canvas2D不需要context.draw(false);
},
canvasEnd(event) {
isButtonDown = false;
},
//清除画布
cleardraw() {
arrx = [];
arry = [];
arrz = [];
context.clearRect(0, 0, canvasw, canvash);
if(this.data.sysType === 'iOS') {
context.fillStyle = 'rgba(255, 255, 255, 1)';
context.strokeStyle='#444';
} else {
context.fillStyle = 'rgba(0, 0, 0, 1)';
context.strokeStyle='#aaa';
}
wx.setStorageSync('draw', false)
this.setData({
imgUrl: '',
signBase64: ''
})
},
//生成图片路径
uploadImg() {
var that = this
var draw = wx.getStorageSync('draw')
if (!draw) {
Toast('请完成签名!')
return
}
wx.canvasToTempFilePath({
x: 100,
y: 200,
width: 50,
height: 50,
destWidth: 100,
destHeight: 100,
canvas: this.data.canvas,//画布标识，传入 canvas 组件实例 （canvas type="2d" 时使用该属性）。
success(res) {
// console.log(res.tempFilePath)
let imgBase64 = wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64')
that.setData({
imgUrl: res.tempFilePath,
signBase64: imgBase64
})
Toast.success('上传成功！')
},
fail(err) {
console.log(err)
wx.showModal({
title: '提示',
content: '生成签名失败。微信当前版本不支持，请更新到最新版本！',
showCancel: false
});
}
})
},
})
wxss
.sign-contain {
display: flex;
flex-direction:column;
width: 100%;
height: 100%;
align-items: center;
}
.signName {
flex: 1;
}
.bg000{
background-color: #000;
}
.btn-wrap{
display: block;
width:100%;
height: 100rpx;
margin: 20rpx 0;
position: relative;
}
.btn-wrap button{
width: 43%;
}
参考了https://www.jb51.net/article/215000.htm
如果侵权请联系删除