微信小程序实现电子签名并导出图片


Posted in Javascript onMay 27, 2020

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

wxml:

<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>

<button type="default" bindtap="cleardraw">清除画布</button>
<button type="default" bindtap="getimg">导出图片</button>

wxss:

.canvas {
 width: 100%;
 min-height: 400rpx;
 border: 1rpx solid #000;  /*//突出canvas画布范围 */
 box-sizing: border-box;
}

js:

var context = null;// 使用 wx.createContext 获取绘图上下文
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//获取系统信息
wx.getSystemInfo({
 success: function (res) {
  canvasw = res.windowWidth;//设备宽度
  canvash = res.windowHeight; //设备高度
 }
});

Page({
 canvasIdErrorCallback: function (e) {
  console.error(e.detail.errMsg)
 },
 //绘制开始
 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);
 },
 //导出图片
 getimg: function () {
  if (arrx.length == 0) {
   wx.showModal({
    title: '提示',
    content: '签名内容不能为空!',
    showCancel: false
   });
   return false;
  };
  //生成图片
  wx.canvasToTempFilePath({
   canvasId: 'canvas',
   success: function (res) {
    wx.saveImageToPhotosAlbum({
     filePath: res.tempFilePath,
     success(res) {
      // console.log(res)
      wx.showToast({
       title: '保存成功',
      });
     },
     fail(err) {
      console.log(err)
     }
    })
    //将照片存入服务器
    // wx.uploadFile({
    //  url: '', //接口地址
    //  filePath: res.tempFilePath,
    //  name: 'file',
    //  formData: {               
    //   'user': 'test'
    //  },
    //  success function (res) {
    //   console.log(res);
    //  },
    //  fail: function (res) {
    //   console.log(res);
    //  },
    //  complete: function (res) {
    //  }
    // });
   }
  })

 },
 /**
  * 页面的初始数据
  */
 data: {
  
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  // 使用 wx.createContext 获取绘图上下文 context
  context = wx.createCanvasContext('canvas');
  context.beginPath()
  context.setStrokeStyle('#000000');
  context.setLineWidth(4);
  context.setLineCap('round');
  context.setLineJoin('round');
 }
})

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

Javascript 相关文章推荐
实例:尽可能写友好的Javascript代码
Oct 09 Javascript
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
select组合框option的捕捉实例代码
Sep 30 Javascript
Angular实现form自动布局
Jan 28 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
vue实现nav导航栏的方法
Dec 13 Javascript
Node.js操作系统OS模块用法分析
Jan 04 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 #Javascript
微信公众号网页分享功能开发的示例代码
May 27 #Javascript
JS字符串补全方法padStart()和padEnd()
May 27 #Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 #Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 #Javascript
使用JavaScript获取Django模板指定键值数据
May 27 #Javascript
基于Vue CSR的微前端实现方案实践
May 27 #Javascript
You might like
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
javascript读写json示例
2014/04/11 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
Python、Javascript中的闭包比较
2015/02/04 Python
Python socket编程实例详解
2015/05/27 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
详解Python如何生成词云的方法
2018/06/01 Python
用python做游戏的细节详解
2019/06/25 Python
python re.match()用法相关示例
2021/01/27 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
你对IPv6了解程度
2016/02/09 面试题
学校节能减排方案
2014/06/13 职场文书
公司年终奖分配方案
2014/06/16 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
大学生学期个人总结
2015/02/12 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
小学推普周活动总结
2015/05/07 职场文书
Python利用folium实现地图可视化
2021/05/23 Python