微信小程序实现手写签名(签字版)

本文实例为大家分享了微信小程序实现手写签名的具体代码,供大家参考,具体内容如下

公司近期有个需要用户签名的功能,就用小程序canvas写了个

wxml

<view class="sign">
  <view class="paper">
    <canvas class="handWriting" disable-scroll="true" bindtouchstart="touchstart1" bindtouchmove="touchmove1"  canvas-id="handWriting1">
    </canvas>
  </view>
  <view class="signBtn">
    <button size="" type="primary" bindtap="sign1ok">完成签字</button> 
    <button size="" type="warn" bindtap="reSign1">重新签字</button>
  </view>
</view>
<view class="image" hidden="{{src?false:true}}">
<image src="{{src}}" ></image>
</view>

js

Page({
  data: {
    context1: null,
    hasDraw:false, //默认没有画
    src:null
  },
  onLoad: function() {
    var context1 = wx.createCanvasContext('handWriting1');
    context1.setStrokeStyle("#000000")
    context1.setLineWidth(3);
    this.setData({
      context1: context1,
    })
  },
  touchstart1: function(e) {
    var context1 = this.data.context1;
    context1.moveTo(e.touches[0].x, e.touches[0].y);
    this.setData({
      context1: context1,
      hasDraw : true, //要签字了
    });
  },
  touchmove1: function(e) {
    var x = e.touches[0].x;
    var y = e.touches[0].y;
    var context1 = this.data.context1;
    context1.setLineWidth(3);
    context1.lineTo(x, y);
    context1.stroke();
    context1.setLineCap('round');
    context1.draw(true);
    context1.moveTo(x, y);
  },
  reSign1: function() { //重新画
    var that = this;
    var context1 = that.data.context1;
    context1.draw(); //清空画布
    that.setData({
      hasDraw: false, //没有画
      src: null
    });
  },
  sign1ok: function () {
    var that = this;
    if(!that.data.hasDraw){
      console.log("签字是空白的 没有签字")
    }else{
      var context1 = that.data.context1;
      context1.draw(true, wx.canvasToTempFilePath({
        canvasId: 'handWriting1',
        success(res) {
          console.log(res.tempFilePath) //得到了图片下面自己写上传吧
          that.setData({
            src: res.tempFilePath
          })
          
        }
      }))
    }
  },
});

wxss

.paper{border:1px solid #dedede; margin: 10px; height:160px }
.image{border:1px solid #dedede; margin: 10px; height:160px }
.signBtn{display: flex; margin-top:20px;}
.signTitle{ text-align: center; font-size:1.2em;margin:10px auto;}
.handWriting{width:100%}
.image image{width:100%; height:160px }

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

(0)

相关推荐

  • uniapp实现微信小程序的电子签名效果(附demo)

    目录 1.标签和样式 2.横屏切换 3.绘图 3.1.初始化数据会吧? 3.2.触摸开始时获取起点,会吧? 3.3.触摸移动获取路径点,会吧? 3.4.触摸结束,将未绘制的点清空防止对后续路径产生干扰,简单吧? 3.5.绘制笔迹,没得问题吧? 4.扫尾处理 画布可以做很多事情,比如可以绘图,也可以做海报.在这里只是想拿它来的实现亲笔签名,开启不一样的亲笔签名姿势. 开发框架:uniapp开发语言:vue2展示平台:微信小程序(实际可以兼容多个平台) 标签和样式没什么好说的,这里绘制了简单的页面,

  • 微信小程序实现手写签名的示例代码

    目录 1.效果图 2.相关代码 canvas代码 js相关 在微信小程序上实现手写签名,获取canvascontext新版本和旧版本有点坑,新版本在获取canvas后如果页面有滑动,则签名坐标出现异常(在微信开发者工具上会出现2022-2-17),但是在真机上即使滑动也不会出现异常,为了防止出现问题,暂时使用旧版本获取canvascontext 1.效果图 2.相关代码 canvas代码 新版2d canvas <canvas id="canvas" class="ca

  • 微信小程序实现简单手写签名组件的方法实例

    目录 背景: 需求: 效果 一.思路 二.实现 1. 页面与样式 2. 初始化 3. 点击时 4. 签名时 三.总结 背景: 在做项目过程中,需要在微信小程序中实现手写签名组件.在网上找了微信小程序手写签名实现,但是都是不太理想.在实际运用中,会因为实时计算较多的贝塞尔曲线而产生卡顿.效果不理想.所以退一步,不需要笔锋以及笔迹模拟效果.只需要简单的手写签名实现. 需求: 可以实现用户在微信小程序上手写签名. 需要组件化. 效果 一.思路 在微信小程序中,我们使用canvas组件实现.将用户的输入

  • 微信小程序实现电子签名

    本文实例为大家分享了微信小程序实现电子签名的具体代码,供大家参考,具体内容如下 <view class="sign-contain"> <view class="signName"> <canvas id="canvas" canvas-id="canvas" class="{{ sysType === 'iOS' ? 'canvas' : 'canvas bg000'}}"

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

    本文实例为大家分享了微信小程序实现电子签名的具体代码,供大家参考,具体内容如下 // XXXX.wxml <view class="signName"> <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bind

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

    本文实例为大家分享了微信小程序做电子签名,并导出图片的具体代码,供大家参考,具体内容如下 wxml: <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouch

  • java遇到微信小程序 "支付验证签名失败" 问题解决

    最近在做一个微信小程序项目做到微信支付的时候遇到的一些问题! 详细步骤: 开发前准备(必须) 小程序标识(appid):wx4d4838ebec29b8** 商户号(mch_id):15508070** 商户密钥(key) :wHtQckdfiRBVF7ceGTcSWEEORt6C0D** 我们用微信官方提供的SDK开发 :https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=11_1 下载 SDK完成后 : 开始写我们的程 进入微信

  • 微信小程序canvas实现签名功能

    在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场 前言 微信小程序canvas实现签名功能 核心内容简介: (1)签名实现,开始,移动,结束 (2)重写 (3)完成 (4)上传 一.微信小程序canvas实现签名功能 效果演示: (1)签名实现 (2)重写 (3)完成 完成后将图片展示在相应的位置 (4)根据业务需求,可以将图片上传到后台,在需要的地方展示 二.上代码 1.全部演示 wxml <!--pages/canvas-test/canvas-test.wxm

  • .NET微信小程序用户数据的签名验证和解密代码

    微信小程序时下大热,抱着学习的心态了解了一下,目前没有搜到完整的.NET用户数据签名验证和解密代码,于是就写了一点. 简单使用方法: 1.客户端调用wx.getUserInfo方法,服务端创建WeChatLoginInfo类的实例接收客户端发来的数据: 2.服务端新建WeChatAppDecrypt类的实例,初始化此类时需传入appId与AppSecret用于验证: 3.调用WeChatAppDecrypt类中的Decrypt方法,传入步骤1中获取的WechatLoginInfo实例: 4.得到

  • 微信小程序实现横屏和竖屏签名功能

    本文实例为大家分享了微信小程序实现横屏和竖屏签名的具体代码,供大家参考,具体内容如下 wxml <view class="container">   <canvas canvas-id="firstCanvas" id="firstCanvas" bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></ca

随机推荐