微信小程序手写板电子签名实现

参考github高星(截止文章发布时6.7k)项目:https://github.com/szimek/signature_pad
当前signature_pad版本:v3.0.0-beta.3
这是一个现改signature_pad为微信小程序使用方法的示例,如果signature_pad版本更新或者小程序版本更新导致无法正常使用,请参考github上其他方案。

1、wxml
<view style="height: 300rpx">
	<canvas
		type="2d"
		id="canvas"
		style="display: block; width: 100%; height: 100%;"
		bindtouchstart="handleTouchStart"
		bindtouchmove="handleTouchMove"
		bindtouchend="handleTouchEnd"
	></canvas>
</view>
<button bindtap="handleClear">清除</button>
<button bindtap="handleChangeColor">改变颜色</button>
<button bindtap="handleCancel">撤销</button>
<button bindtap="handleSave" data-type="image/png" data-suffix="png">保存PNG</button>
<button bindtap="handleSave" data-type="image/jpeg" data-suffix="jpg">保存JPG</button>
2、js
import SignaturePad from './signature_pad-3.0.0-beta.3'
Page({
   
  data: {
   
    signaturePad: null
  },
  onLoad: function () {
   
    wx.createSelectorQuery()
      .select('#canvas')
      .fields({
   
        node: true,
        size: true,
      })
      .exec(this.init.bind(this))
  },
  init(res) {
   
    const width = res[0].width
    const height = res[0].height
    const canvas = res[0].node
    const ctx = canvas.getContext('2d')
    const dpr = wx.getSystemInfoSync().pixelRatio
    canvas.width = width * dpr
    canvas.height = height * dpr
    ctx.scale(dpr, dpr)
    const signaturePad = new SignaturePad(canvas, {
   
      ratio: dpr,
      backgroundColor: 'rgb(255, 255, 255)'
    });
    this.setData({
   
      signaturePad: signaturePad
    })
  },
  handleTouchStart: function (e) {
   
    this.data.signaturePad._handleTouchStart(e)
  },
  handleTouchMove: function (e) {
   
    this.data.signaturePad._handleTouchMove(e)
  },
  handleTouchEnd: function (e) {
   
    this.data.signaturePad._handleTouchEnd(e)
  },
  handleClear: function () {
   
    this.data.signaturePad.clear()
  },
  handleChangeColor: function () {
   
    const r = this.randColorVal();
    const g = this.randColorVal();
    const b = this.randColorVal();
    const color = `rgb(${
     r}, ${
     g}, ${
     b})`;
    this.data.signaturePad.penColor = color;
  },
  randColorVal: function () {
   
    return Math.round(Math.random() * 255);
  },
  handleCancel: function () {
   
    var data = this.data.signaturePad.toData();
    if (data) {
   
      data.pop();
      this.data.signaturePad.fromData(data);
    }
  },
  handleSave: function (e) {
   
    const type = e.currentTarget.dataset.type
    const suffix = e.currentTarget.dataset.suffix
    if (this.data.signaturePad.isEmpty()) {
   
      wx.showToast({
   
        title: 'Please provide a signature first.',
        icon: 'none'
      })
    } else {
   
      var dataURL = this.data.signaturePad.toDataURL(type);
      var save = wx.getFileSystemManager();
      var number = Math.random();
      save.writeFile({
   
        filePath: `${
     wx.env.USER_DATA_PATH}/pic${
     number}.${
     suffix}`,
        data: dataURL.slice(22),
        encoding: 'base64',
        success: res => {
   
          wx.saveImageToPhotosAlbum({
   
            filePath: `${
     wx.env.USER_DATA_PATH}/pic${
     number}.${
     suffix}`,
            success: function (
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值