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


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脚本的性能的几个注意事项
Dec 22 Javascript
jquery 最简单的属性菜单
Oct 08 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 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提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
python如何对实例属性进行类型检查
2018/03/20 Python
python如何实现视频转代码视频
2019/06/17 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
深入了解python列表(LIST)
2020/06/08 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
体育教育毕业生自荐信
2013/11/21 职场文书
丑小鸭教学反思
2014/02/03 职场文书
中国好声音广告词
2014/03/18 职场文书
项目经理任命书范本
2014/06/05 职场文书
授权收款委托书
2014/09/23 职场文书
学校政风行风整改方案
2014/10/25 职场文书
网络营销计划
2015/01/17 职场文书
接收函格式
2015/01/30 职场文书
企业介绍信范文
2015/01/30 职场文书
商务考察邀请函模板
2015/02/02 职场文书
母亲节感言
2015/08/03 职场文书
小学语文国培研修日志
2015/11/13 职场文书
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python