全国服务热线:4008-888-888

行业新闻

今天头条入局小程序_微信小程序完成电子签名功

微信小程序实现电子签名功能       这篇文章主要为大家详细介绍了微信小程序实现电子签名功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
view canvas id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback" /canvas /view view view view bindtap="uploadImg" 上传签名 /view /view view view bindtap="cleardraw" 清除签名 /view /view

js:

var context = null;// 使用 wx.createContext 获取绘图上下文 context
var isButtonDown = false;//是否在绘制中
var arrx = [];//动作横坐标
var arry = [];//动作纵坐标
var arrz = [];//总做状态,标识按下到抬起的一个组合
var canvasw = 0;//画布宽度
var canvash = 0;//画布高度
Page({
 data: {
 onLoad: function () {
 this.startCanvas();
 * 以下 - 手写签名 / 上传签名
 startCanvas: function () {//画布初始化执行
 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: function () {
 context = wx.createCanvasContext('canvas');
 context.beginPath()
 context.fillStyle = 'rgba(255, 255, 255, 0)';
 context.setStrokeStyle('#000000');
 context.setLineWidth(4);
 context.setLineCap('round');
 context.setLineJoin('round');
 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);
 uploadImg(){
 var that = this
 //生成图片
 wx.canvasToTempFilePath({
 canvasId: 'canvas',
 //设置输出图片的宽高
 // destWidth:150, 
 // destHeight:150,
 // fileType:'jpg',
 quality:1.0,
 success: function (res) {
 console.log(res)
 // canvas图片地址 res.tempFilePath
 fail: function () {
 wx.showModal({
 title: '提示',
 content: 'canvas生成图片失败。微信当前版本不支持,请更新到最新版本!',
 showCancel: false
 complete: function () {}
})

为大家推荐现在关注度比较高的微信小程序教程一篇:小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服