這篇文章主要介紹“微信小程序怎么用canvas實現電子簽名”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序怎么用canvas實現電子簽名”文章能幫助大家解決問題。
具體代碼如下
<view class="sign-contain">
<view class="signName">
<canvas id="canvas" canvas-id="canvas" class="{{ sysType === 'iOS' ? 'canvas' : 'canvas bg000'}}" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
</view>
<view class="btn-wrap">
<button catchtap="cleardraw">清除簽名</button>
<button catchtap="uploadImg">上傳簽名</button>
</view>
</view>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: '' // 判斷機型
},
onLoad: function (options) {
let that = this
let res = wx.getSystemInfoSync()
const system = res.system.split(' ')
that.setData({
sysType: system[0],
})
let params = JSON.parse(options.params)
that.setData({
info: params,
})
that.startCanvas();
that.initCanvas()
},
/**
* 以下 - 手寫簽名 / 上傳簽名
*/
startCanvas() {//畫布初始化執行
var that = this;
//獲取系統信息
wx.getSystemInfo({
success: function (res) {
canvasw = res.windowWidth;
canvash = res.windowHeight;
that.setData({ canvasw: canvasw });
that.setData({ canvash: canvash });
}
});
this.initCanvas();
this.cleardraw();
},
//初始化函數
initCanvas() {
context = wx.createCanvasContext('canvas');
context.beginPath()
if(this.data.sysType === 'iOS') {
context.fillStyle = 'rgba(255, 255, 255, 1)';
context.setStrokeStyle('#444');
} else {
context.fillStyle = 'rgba(0, 0, 0, 1)';
context.setStrokeStyle('#aaa');
}
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
},
canvasStart(event) {
isButtonDown = true;
arrz.push(0);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
},
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, canvasw, canvash);
if(this.data.sysType === 'iOS') {
context.fillStyle = 'rgba(255, 255, 255, 1)';
context.setStrokeStyle('#444');
} else {
context.fillStyle = 'rgba(0, 0, 0, 1)';
context.setStrokeStyle('#aaa');
}
context.setLineWidth(3);
context.setLineCap('round');
context.setLineJoin('round');
context.stroke();
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.setStrokeStyle('#444');
} else {
context.fillStyle = 'rgba(0, 0, 0, 1)';
context.setStrokeStyle('#aaa');
}
context.draw(true);
},
uploadImg() {
var that = this
//生成圖片
// context.draw(true,()=> {
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'canvas',
//設置輸出圖片的寬高
fileType: 'jpg',
quality: 1,
success: function (res) {
// canvas圖片地址 res.tempFilePath
let imgBase64 = wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64')
that.setData({
imgUrl: res.tempFilePath,
signBase64: imgBase64
})
that.submitSign()
console.log('imgBase64', 'data:image/jpeg;base64,' + imgBase64)
// wx.saveImageToPhotosAlbum({
// filePath: res.tempFilePath,
// success(res4) {
// console.log(res,'保存res4');
// wx.showToast( {
// title: '已成功保存到相冊',
// duration: 2000
// } );
// }
// })
},
fail: function () {
wx.showModal({
title: '提示',
content: 'canvas生成圖片失敗。微信當前版本不支持，請更新到最新版本！',
showCancel: false
});
},
complete: function () { }
}, 5000)
})
// })
},
// 提交簽名
submitSign() {
let that = this
wx.showLoading({
title: '正在提交...',
mask: true
})
let type = '1'
if(that.data.sysType === 'iOS') {
type = '0'
} else {
type = '1'
}
wx.$getWxLoginCode(resp => {
const params = {
qmbase64: that.data.signBase64,
}
console.info("入參", params)
wx.kservice.yyyurl(params, res => {
wx.hideLoading()
if (res.statusCode === '200') {
wx.showModal({
title: '提示',
content: res.message,
showCancel: false,
confirmText: '返回首頁',
success(res) {
if (res.confirm) {
wx.reLaunch({
url: '/pages/index/index'
})
}
}
})
} else {
wx.showModal({
title: '提示',
content: res.message,
showCancel: true,
cancelText: '返回首頁',
confirmText: '重新提交',
success: (result) => {
if (result.cancel) {
// 取消停留
wx.reLaunch({
url: '/pages/index/index'
})
} else if (result.confirm) {
//重新提交
that.submitSign()
}
},
});
}
}, {}, true, true)
})
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
}).sign-contain {
display: flex;
flex-direction:column;
width: 100%;
height: 100%;
}
.signName {
flex: 1;
}
.canvas {
width: 100%;
height: 100%;
}
.bg000{
background-color: #000;
}
.btn-wrap{
display: block;
width:100%;
height: 100rpx;
margin: 20rpx 0;
position: relative;
}
.btn-wrap button{
width: 43%;
}關于“微信小程序怎么用canvas實現電子簽名”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
