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


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据option的value值快速设定初始的selected选项
Aug 13 Javascript
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
Angular 作用域scope的具体使用
Dec 11 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 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
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
Javascript无阻塞加载具体方式
2013/06/28 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
Python import用法以及与from...import的区别
2015/05/28 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
pip命令无法使用的解决方法
2018/06/12 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
Java基础面试题
2014/07/19 面试题
Java语言程序设计测试题改错题部分
2014/07/22 面试题
《燕子专列》教学反思
2014/02/21 职场文书
迎元旦广播稿
2014/02/22 职场文书
数学检讨书1000字
2014/02/24 职场文书
就业协议书怎么填
2014/04/11 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
Python 文本滚动播放器的实现代码
2021/04/25 Python
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技