评论

微信小程序使用新版Canvas画布实现电子签名

微信小程序使用新版Canvas画布实现电子签名

布局文件:

<view class="container column-me">
  <view class="tips">
    请绘制清晰可见的签名并保存
  </view>
  <canvas class="canvas" id="canvas" type="2d" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
  <view class='addBtn'>
    <button type="default" class='txt reset' bindtap="clickClear">重新签名</button>
    <button type="default" class='txt' bindtap="clickSave">保存签名</button>
  </view>
</view>


样式文件:

page {
  background#fff;
}
 
.container {
  padding: 0 20rpx;
  height: 100vh;
  background#fff;
  border-radius: 5px;
}
 
.canvas {
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  margin-top: 10rpx;
}
 
.tips {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color#aaa;
  font-size: 20rpx;
}
 
.addBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background#fff;
  z-index: 100;
  padding: 10rpx 0;
}
 
.addBtn .txt {
  text-align: center;
  width: 200rpx;
  font-size: 15rpx;
  border-radius: 100px;
  background#0097fe;
  color#fff;
  box-sizing: border-box;
  margin: 0 20rpx;
  padding: 10px;
  z-index: 100;
}
 
.reset {
  background#fff !important;
  border: 1px solid #cccccc;
  color#333333 !important;
}


配置文件:

{
  "usingComponents": {},
  "pageOrientation""landscape",
  "navigationBarTitleText""医生签名"
}


JS文件:

let http = require("../../utils/http.js");
// canvas 全局配置
var context = null// 使用 wx.createContext 获取绘图上下文 context
var mCanvas = null;
//注册页面
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    userId''//用户id
    hasDrawfalse//默认没有画
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoadfunction (options) {
    this.setData({
      userId: options.scene,
      hasDrawfalse,
    })
    wx.createSelectorQuery()
      .select('#canvas'// 在 WXML 中填入的 id
      .fields({
        nodetrue,
        sizetrue
      })
      .exec((res) => {
        // Canvas 对象
        const canvas = res[0].node
        mCanvas = res[0].node
        // 渲染上下文
        context = canvas.getContext('2d')
        // Canvas 画布的实际绘制宽高
        const width = res[0].width
        const height = res[0].height
        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio
        canvas.width = width * dpr
        canvas.height = height * dpr
        context.scale(dpr, dpr)
        //绘制背景
        context.fillStyle = '#fff'
        context.clearRect(0, 0, canvas.width, canvas.height)
        context.fillRect(0, 0, canvas.width, canvas.height)
      })
  },
  onShow() {
 
  },
  canvasIdErrorCallbackfunction (e) {},
  //开始
  canvasStartfunction (event) {
    context.moveTo(event.touches[0].x, event.touches[0].y);
  },
  //过程
  canvasMovefunction (event) {
    var x = event.touches[0].x;
    var y = event.touches[0].y;
    context.lineWidth = 4
    context.lineCap = 'round'
    context.lineJoin = 'round'
    context.lineTo(x, y);
    context.stroke();
    this.setData({
      hasDrawtrue,
    });
  },
  canvasEndfunction (event) {
 
  },
  clickClearfunction () {
    context.clearRect(0, 0, mCanvas.width, mCanvas.height); //清除画布
    context.beginPath() //清空画笔
    this.setData({
      hasDrawfalse,
    });
  },
  //保存签名
  clickSavefunction () {
    let that = this
    if (!this.data.hasDraw) {
      wx.showModal({
        title'提示',
        content'签名内容不能为空!',
        showCancelfalse
      });
      return false;
    };
    if (this.data.userId === undefined || this.data.userId === '') {
      wx.showModal({
        title'提示',
        content'用户id为空,请重新扫码',
        showCancelfalse
      });
      return false;
    }
    //生成图片
    wx.canvasToTempFilePath({
      canvas: mCanvas,
      successfunction (res) {
        http.upload({
          url'/admin/upload/upLoadFile',
          filePath: res.tempFilePath,
          name'file',
          formData: {},
          callBackfunction (uploadRes) {
            let res = JSON.parse(uploadRes)
            let url = res.data.url
            http.request({
              url"/doctor/home/updateSignature",
              method"POST",
              noBodytrue,
              data: {
                id: that.data.userId,
                image: url,
              },
              callBack: (res) => {
                wx.showModal({
                  title'温馨提示',
                  content'保存签名成功!',
                  confirmText'退出',
                  showCancelfalse,
                  success(res) {
                    if (res.confirm) {
                      wx.exitMiniProgram({
                        successfunction (res) {
                          console.log(res)
                        },
                        failfunction (err) {
                          console.log(err)
                        }
                      })
                    } else if (res.cancel) {
                      console.log('用户点击取消')
                    }
                  }
                })
              }
            })
          }
        })
      }
    })
  },
 
})


最后一次编辑于  2023-08-04  
点赞 8
收藏
评论

6 个评论

  • 谢宇
    谢宇
    02-27

    首先感谢楼主,然后经过几个小时的修修整整了一些bug

    1,无法断笔,字会一直连着,很潦草。

    解决办法:定义集合,保存所有的xy

    2,skyline下失效

    解决办法:

    事件绑定全部改为bind:xxx

    事件回调参数event.touches[0].x||y,该skyline下应改为:event.touches[0].pageX||pageY

    02-27
    赞同 2
    回复 2
    • 一笑皆春
      一笑皆春
      02-28
      嗯,这是之前写的了,感谢分享
      02-28
      回复
    • 金老三
      金老三
      发表于移动端
      07-16回复一笑皆春
      \。孞'
      07-16
      回复
  • 美好。
    美好。
    09-09


    刚刚

    你好,请问微信小程序如果使用电子签名功能,需要申请什么服务类目呢


    09-09
    赞同
    回复 1
  • 美好。
    美好。
    09-09

    你好,请问微信小程序如果使用电子签名功能,需要申请什么服务类目呢

    09-09
    赞同
    回复
  • 一斤
    一斤
    04-10

    部分手机会出现黑屏情况,又遇到过吗

    04-10
    赞同
    回复 1
    • 一笑皆春
      一笑皆春
      04-10
      没遇到过,您研究研究吧
      04-10
      回复
  • Serendipity
    Serendipity
    02-20

    请问如何加笔锋啊

    02-20
    赞同
    回复 1
    • 一笑皆春
      一笑皆春
      02-20
      这个。。不清楚呀,网上搜搜吧
      02-20
      回复
  • Mars
    Mars
    01-12

    折叠屏上有bug么?我这边折叠屏会存在错位偏移,没法正常签名

    01-12
    赞同
    回复 2
登录 后发表内容