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


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 相关文章推荐
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
js实现本地时间同步功能
Aug 26 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 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
dedecms模版制作使用方法
2007/04/03 PHP
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
PHP实现货币换算的方法
2014/11/29 PHP
php操作mongoDB实例分析
2014/12/29 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
python爬取51job中hr的邮箱
2016/05/14 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
详解flask表单提交的两种方式
2018/07/21 Python
浅析Python函数式编程
2018/10/06 Python
python实现贪吃蛇小游戏
2020/03/21 Python
pandas计数 value_counts()的使用
2019/06/24 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
python wsgiref源码解析
2021/02/06 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
什么是servlet
2012/05/08 面试题
工程力学专业毕业生求职信
2013/10/06 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
Python道路车道线检测的实现
2021/06/27 Python