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

zouxiaohu2020

已于 2024-03-25 09:23:01 修改

阅读量3.8k

点赞数 10

分类专栏：小程序文章标签：小程序

于 2021-01-19 18:12:20 首次发布

本文链接：https://blog.csdn.net/zouxiaohu2020/article/details/112848384

版权

参考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 (