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


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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
Jquery $when done then的用法详解
May 20 Javascript
prototype.js常用函数详解
Jun 18 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
JavaScript中splice与slice的区别
May 09 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 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 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
JS变量及其作用域
2017/03/29 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
Python基于贪心算法解决背包问题示例
2017/11/27 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
pycham查看程序执行的时间方法
2018/11/29 Python
Python 求数组局部最大值的实例
2019/11/26 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
中学教师实习自我鉴定
2013/09/28 职场文书
三万活动总结
2014/04/28 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
政协委员个人总结
2015/03/03 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
python基础之错误和异常处理
2021/10/24 Python
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript