canvas 手写签名微信小程序

最新推荐文章于 2024-10-15 13:36:56 发布

小白_0615

最新推荐文章于 2024-10-15 13:36:56 发布

阅读量406

点赞数

分类专栏：基础文章标签： canvas 签名微信小程序

本文链接：https://blog.youkuaiyun.com/qq_42897782/article/details/119171662

版权

很多时候，程序中需要用到签名的功能，附上源码（微信小程序）

.wxml

<view class="canvasBox">
      <view class="canvasTitle">请签名：</view>
      <view class="canvasContent">
        <view class="singatureTag">签名区域</view>
        <canvas style="width: {
  {canvasw}}px; height: {
  {canvash}}rpx;line-height:{
  {canvash}}rpx" disable-scroll="true"
          canvas-id="myCanvas" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"
          touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
      </view>
</view>


<view class="next" style="padding-bottom:calc({
  {iphonex_height}}px + 20rpx);">
      <view class="next-list">
        <van-button round custom-style='font-size:30rpx;border-radius:20px;width:60%;' type="info" plain color="#5359a7"
          catchtap="clearDraw">清　　除</van-button>
      </view>
      <view class="next-list">
        <van-button round custom-style='font-size:30rpx;width:60%;' type="info" color="#1417b7" catchtap="submitDraw">
          提　　交</van-button>
      </view>
</view>

.js

data: {
    iphonex_height: app.globalData.iphonex_safe_area_height, //inphonex安全区高度
    currentColor: '#000',
    canvasw: 0,
    canvash: 0,
    userId: '',
    signFile: '',
    base64: '',
  },

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    that.setData({
      userId: options.userId,
      signFile: options.signFile,
      name: options.name,