温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序实现电子签名功能的方法

发布时间:2020-07-30 10:12:27 来源:亿速云 阅读:609 作者:小猪 栏目:开发技术

这篇文章主要讲解了微信小程序实现电子签名功能的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

// XXXX.wxml
<view class="signName">
  <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart"
    bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd"
    binderror="canvasIdErrorCallback"></canvas>
 </view>
 <view class="CList flex">
  <view class="flex_item marginR20" >
    <view class="saveBtn" bindtap="uploadImg">上传签名</view>
  </view>
  <view class="flex_item">
    <view class="clearBtn" 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 () {}
  })
 },
})

看完上述内容,是不是对微信小程序实现电子签名功能的方法有进一步的了解,如果还想学习更多内容,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI