溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了微信小程序實現電子簽名并導出圖片的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
wxml:
<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas> <button type="default" bindtap="cleardraw">清除畫布</button> <button type="default" bindtap="getimg">導出圖片</button>
wxss:
.canvas {
width: 100%;
min-height: 400rpx;
border: 1rpx solid #000; /*//突出canvas畫布范圍 */
box-sizing: border-box;
}js:
var context = null;// 使用 wx.createContext 獲取繪圖上下文
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//獲取系統信息
wx.getSystemInfo({
success: function (res) {
canvasw = res.windowWidth;//設備寬度
canvash = res.windowHeight; //設備高度
}
});
Page({
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)
},
//繪制開始
canvasStart: function (event) {
isButtonDown = true;
arrz.push(0);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
},
//繪制過程
canvasMove: function (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);
context.setStrokeStyle('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
context.stroke();
context.draw(false);
},
canvasEnd: function (event) {
isButtonDown = false;
},
cleardraw: function () {
//清除畫布
arrx = [];
arry = [];
arrz = [];
context.clearRect(0, 0, canvasw, canvash);
context.draw(true);
},
//導出圖片
getimg: function () {
if (arrx.length == 0) {
wx.showModal({
title: '提示',
content: '簽名內容不能為空！',
showCancel: false
});
return false;
};
//生成圖片
wx.canvasToTempFilePath({
canvasId: 'canvas',
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
// console.log(res)
wx.showToast({
title: '保存成功',
});
},
fail(err) {
console.log(err)
}
})
//將照片存入服務器
// wx.uploadFile({
// url: '', //接口地址
// filePath: res.tempFilePath,
// name: 'file',
// formData: {
// 'user': 'test'
// },
// success function (res) {
// console.log(res);
// },
// fail: function (res) {
// console.log(res);
// },
// complete: function (res) {
// }
// });
}
})
},
/**
* 頁面的初始數據
*/
data: {
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
// 使用 wx.createContext 獲取繪圖上下文 context
context = wx.createCanvasContext('canvas');
context.beginPath()
context.setStrokeStyle('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
}
})看完上述內容，是不是對微信小程序實現電子簽名并導出圖片的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
