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


Posted in Javascript onJuly 29, 2020

本文实例为大家分享了微信小程序实现电子签名的具体代码,供大家参考,具体内容如下

// 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 () {}
 })
 },
})

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

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

Javascript 相关文章推荐
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 #Javascript
浅谈JavaScript中this的指向问题
Jul 28 #Javascript
浅谈JavaScript中this的指向更改
Jul 28 #Javascript
Postman内建变量常用方法实例解析
Jul 28 #Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 #Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 #Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 #Javascript
You might like
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
详解Python中类的定义与使用
2017/04/11 Python
Python中collections模块的基本使用教程
2018/12/07 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
python下载库的步骤方法
2019/10/12 Python
python实现简单学生信息管理系统
2020/04/09 Python
python实现简单的tcp 文件下载
2020/09/16 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
运动会广播稿30字
2014/01/21 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
数学教学随笔感言
2014/02/17 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
鲁冰花观后感
2015/06/10 职场文书