微信小程序实现电子签名并导出图片

微信小程序实现电子签名并导出图片微信小程序实现电子签名并导出图片

主要为大家详细介绍了微信小程序实现电子签名，并导出图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序做电子签名，并导出图片的具体代码，供大家参考，具体内容如下

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:

js:

var context = null;// 使用 wx.createContext 获取绘图上下文

var isButtonDown = false;

var arrx = [];

var arry = [];

var arrz = [];

var canvasw = 0;

var canvash = 0;

//获取系统信息

wx.getSystemInfo({

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);

},

};

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');

canvasEnd: function (event) {

isButtonDown = false;

},

cleardraw: function () {

//清除画布

arrx = [];

arry = [];

arrz = [];

context.clearRect(0, 0, canvasw, canvash);

context.draw(true);

content: '签名内容不能为空！',

showCancel: false

});

return false;

};

//生成图片

wx.canvasToTempFilePath({

canvasId: 'canvas',

success: function (res) {

wx.saveImageToPhotosAlbum({

},

fail(err) {

console.log(err)

}

})

//将照片存入服务器

// wx.uploadFile({

// url: '', //接口地址

// filePath: res.tempFilePath,

// name: 'file',

// fail: function (res) {