<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 = [];//動(dòng)作橫坐標(biāo)
var arry = [];//動(dòng)作縱坐標(biāo)
var arrz = [];//總做狀態(tài)，標(biāo)識(shí)按下到抬起的一個(gè)組合
var canvasw = 0;//畫(huà)布寬度
var canvash = 0;//畫(huà)布高度
Page({
? data: {
? ? canvasw: '',
? ? canvash: '',
? ? imgUrl: '',
? ? info: {},
? ? signBase64: '',
? ? sysType: '' // 判斷機(jī)型
? },

? 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()
? },
? /**
? * 以下 - 手寫(xiě)簽名 / 上傳簽名
? */
? startCanvas() {//畫(huà)布初始化執(zhí)行
? ? var that = this;
? ? //獲取系統(tǒng)信息
? ? wx.getSystemInfo({
? ? ? success: function (res) {
? ? ? ? canvasw = res.windowWidth;
? ? ? ? canvash = res.windowHeight;
? ? ? ? that.setData({ canvasw: canvasw });
? ? ? ? that.setData({ canvash: canvash });
? ? ? }
? ? });
? ? this.initCanvas();
? ? this.cleardraw();
? },

? //初始化函數(shù)
? 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;
? },
? //清除畫(huà)布
? 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',
? ? ? ? //設(shè)置輸出圖片的寬高
? ? ? ? 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: '已成功保存到相冊(cè)',
? ? ? ? ? // ? ? ? duration: 2000
? ? ? ? ? // ? ? } );
? ? ? ? ? // ? }
? ? ? ? ? // })
? ? ? ? },
? ? ? ? fail: function () {
? ? ? ? ? wx.showModal({
? ? ? ? ? ? title: '提示',
? ? ? ? ? ? content: 'canvas生成圖片失敗。微信當(dāng)前版本不支持，請(qǐng)更新到最新版本！',
? ? ? ? ? ? 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("入?yún)?, params)
? ? ? wx.kservice.yyyurl(params, res => {
? ? ? ? wx.hideLoading()
? ? ? ? if (res.statusCode === '200') {
? ? ? ? ? wx.showModal({
? ? ? ? ? ? title: '提示',
? ? ? ? ? ? content: res.message,
? ? ? ? ? ? showCancel: false,
? ? ? ? ? ? confirmText: '返回首頁(yè)',
? ? ? ? ? ? success(res) {
? ? ? ? ? ? ? if (res.confirm) {
? ? ? ? ? ? ? ? wx.reLaunch({
? ? ? ? ? ? ? ? ? url: '/pages/index/index'
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? })
? ? ? ? } else {
? ? ? ? ? wx.showModal({
? ? ? ? ? ? title: '提示',
? ? ? ? ? ? content: res.message,
? ? ? ? ? ? showCancel: true,
? ? ? ? ? ? cancelText: '返回首頁(yè)',
? ? ? ? ? ? confirmText: '重新提交',
? ? ? ? ? ? success: (result) => {
? ? ? ? ? ? ? if (result.cancel) {
? ? ? ? ? ? ? ? // 取消停留
? ? ? ? ? ? ? ? wx.reLaunch({
? ? ? ? ? ? ? ? ? url: '/pages/index/index'
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? } else if (result.confirm) {
? ? ? ? ? ? ? ? //重新提交
? ? ? ? ? ? ? ? that.submitSign()
? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? });
? ? ? ? }
? ? ? }, {}, true, true)
? ? })
? },

? /**
? * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
? */
? onUnload: function () {

? },

? /**
? ?* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
? ?*/
? onPullDownRefresh: function () {

? },

? /**
? ?* 頁(yè)面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {

? },

? /**
? ?* 用戶(hù)點(diǎn)擊右上角分享
? ?*/
? 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%;
}