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


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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
js 深拷贝函数
Dec 04 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
JS 去除Array中的null值示例代码
Nov 20 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 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
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
python xlsxwriter模块的使用
2020/12/24 Python
介绍一下RMI的基本概念
2016/12/17 面试题
法学毕业生自我鉴定
2013/11/08 职场文书
实习生自荐信范文分享
2013/11/27 职场文书
中学教师请假制度
2014/02/03 职场文书
司机个人年终总结
2015/03/03 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
SQL CASE 表达式的具体使用
2022/03/21 SQL Server