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

下面我将详细讲解如何实现微信小程序实现电子签名并导出图片的完整攻略。

前置知识

在开始之前，需要了解一些前置知识：

• HTML5 canvas
• CanvasRenderingContext2D
• 微信小程序 file API

实现步骤

步骤一：创建 canvas 元素

在小程序的 WXML 文件中，创建一个 canvas 元素：

<canvas id="canvas"></canvas>

步骤二：获取 canvas 对象

在小程序的 JS 代码中，获取 canvas 元素并获取对应的 CanvasRenderingContext2D 对象，代码如下：

const ctx = wx.createCanvasContext('canvas')

步骤三：实现电子签名功能

通过监听用户滑动事件，实现电子签名功能，代码示例如下：

let isMouseDown = false
let lastX = 0
let lastY = 0

wx.createSelectorQuery().select('#canvas').fields({node: true, size: true}).exec(function(res){
  let canvas = res[0].node
  let dpr = wx.getSystemInfoSync().pixelRatio
  canvas.width = res[0].width * dpr
  canvas.height = res[0].height * dpr
  let ctx = canvas.getContext('2d')
  ctx.scale(dpr, dpr)
  ctx.lineWidth = 4
  ctx.strokeStyle = "#000"

  canvas.addEventListener('touchstart', function(e){
    isMouseDown = true
    lastX = e.touches[0].x
    lastY = e.touches[0].y
  })

  canvas.addEventListener('touchmove', function(e){
    if(isMouseDown){
      ctx.beginPath()
      ctx.moveTo(lastX, lastY)
      ctx.lineTo(e.touches[0].x, e.touches[0].y)
      ctx.stroke()
      lastX = e.touches[0].x
      lastY = e.touches[0].y
    }
  })

  canvas.addEventListener('touchend', function(e){
    isMouseDown = false
  })
})

步骤四：导出图片

将签名后的图片导出为 JPG 或 PNG 格式的图片，代码如下：

wx.canvasToTempFilePath({
  canvasId: 'canvas',
  success: (res) => {
    const tempFilePath = res.tempFilePath
    wx.saveImageToPhotosAlbum({
      filePath: tempFilePath,
      success: (res) => {
        console.log("保存成功")
      },
      fail: (res) => {
        console.log("保存失败")
      }
    })
  },
  fail:(res) => {
    console.log("导出失败")
  }
})

示例说明

下面是两个示例，让你更好地了解如何实现电子签名并导出图片。

示例一：通过 wx.showModal 提示用户

在用户完成签名后，在导出图片之前，通过 wx.showModal 方法提示用户是否保存签名，代码如下：

wx.showModal({
  title: '保存签名？',
  content: '是否保存签名？',
  success: (res) => {
    if (res.confirm) {
      // 用户点击确定按钮
      wx.canvasToTempFilePath({
        canvasId: 'canvas',
        success: (res) => {
          const tempFilePath = res.tempFilePath
          wx.saveImageToPhotosAlbum({
            filePath: tempFilePath,
            success: (res) => {
              wx.showToast({
                title: '保存成功！',
                icon: 'success',
                duration: 2000
              })
            },
            fail: (res) => {
              wx.showToast({
                title: '保存失败！',
                icon: 'error',
                duration: 2000
              })
            }
          })
        },
        fail:(res) => {
          wx.showToast({
            title: '导出失败！',
            icon: 'error',
            duration: 2000
          })
        }
      })
    } else if (res.cancel) {
      // 用户点击取消按钮，不保存签名
    }
  }
})

示例二：完成签名之前需要输入姓名

在用户完成签名之前，需输入其姓名，代码如下：

<view class="input-view">
  <view class="input-title">请输入您的姓名：</view>
  <input class="input-name" bindinput="onNameInput" />
</view>
<canvas id="canvas"></canvas>

let name = ''

// 监听姓名输入框
onNameInput: function(e){
  name = e.detail.value
}

// 导出图片时将姓名作为文件名
wx.canvasToTempFilePath({
  canvasId: 'canvas',
  success: (res) => {
    const tempFilePath = res.tempFilePath
    wx.saveImageToPhotosAlbum({
      filePath: tempFilePath,
      success: (res) => {
        wx.showToast({
          title: '保存成功！',
          icon: 'success',
          duration: 2000
        })
      },
      fail: (res) => {
        wx.showToast({
          title: '保存失败！',
          icon: 'error',
          duration: 2000
        })
      },
      complete: (res) => {
        // 如果保存成功，将文件名改为姓名
        if(res.errMsg === 'saveImageToPhotosAlbum:ok'){
          wx.renameFile({
            oldPath: tempFilePath,
            newPath: `${wx.env.USER_DATA_PATH}/${name}.jpg`,
            success: (res) => {
              console.log('文件名修改成功')
            },
            fail: (res) => {
              console.log('文件名修改失败')
            }
          })
        }
      }
    })
  },
  fail:(res) => {
    wx.showToast({
      title: '导出失败！',
      icon: 'error',
      duration: 2000
    })
  }
})

总结

通过以上实现步骤，我们就可以在微信小程序中实现电子签名并导出图片的功能了。需要注意的是，输入框等 UI 可以根据实际需求进行更改，同时导出图片时也需要根据实际需求进行适当的修改。