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


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 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
使用JavaScript switch case 另类写法
Mar 14 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
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创建PDF中文文档
2006/10/09 PHP
实用函数5
2007/11/08 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
jquery创建div 实现代码
2009/04/27 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
Python标准库defaultdict模块使用示例
2015/04/28 Python
Python生成不重复随机值的方法
2015/05/11 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
pytest中文文档之编写断言
2019/09/12 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
上海微创软件面试题
2012/06/14 面试题
Linux的主要特性
2016/09/03 面试题
车间组长岗位职责
2013/12/20 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
学历证明范文
2015/06/16 职场文书
创业计划书之面包店
2019/09/17 职场文书