更新记录

1.0.0（2026-09-02） 下载此版本

微信小程序签名板

平台兼容性

其他

SignBoard 签名板组件

基于微信小程序 canvas 2d 实现的手写签名板组件，支持签名、撤销、清空、导出图片。

功能特性

• 手写签名：触摸事件 + 二次贝塞尔曲线平滑笔迹

• 撤销：记录笔画路径数组，撤销时全量重绘（避免 getImageData 触发微信安全检测）

• 清空：一键清空画布并恢复占位提示

• 导出图片：wx.canvasToTempFilePath 导出 PNG 临时路径

• DPR 自适应：高分屏清晰显示

• 占位提示：未签名时画布中央显示提示文字（直接绘制到 canvas，无层级遮挡）

• 唯一 id：每个实例生成唯一 canvas id，支持同页面多实例

引入方式

<script>
import SignBoard from '@/components/sign-board/sign-board.vue'

export default {
  components: { SignBoard }
}
</script>

基础用法

<template>
  <sign-board
    :width="690"
    :height="420"
    pen-color="#1a1a1a"
    :pen-size="3"
    bg-color="#ffffff"
    placeholder="请在此区域内签名"
    @confirm="onConfirm"
    @clear="onClear"
    @undo="onUndo"
    @error="onError"
  />
</template>

<script>
import SignBoard from '@/components/sign-board/sign-board.vue'

export default {
  components: { SignBoard },
  data() {
    return { signImg: '' }
  },
  methods: {
    onConfirm(tempFilePath) {
      // tempFilePath 为生成的签名图片临时路径
      this.signImg = tempFilePath
      // 可用 uni.uploadFile 上传到服务器
    },
    onClear() {},
    onUndo() {},
    onError(err) {
      console.error('导出失败', err)
    }
  }
}
</script>

Props

Events

交互说明

• 签名：在画布区域内手写，笔迹自动平滑

• 撤销：按笔画粒度撤销，每点击一次撤销最近一笔

• 清空：清除所有笔迹并恢复占位提示

• 确认：未签名时点击会提示「请先签名」；已签名时导出 PNG 图片

• 占位文字：未签名时显示在画布中央，首次起笔自动消失；清空或撤销到空时恢复

导出图片说明

• 微信小程序端：使用 wx.canvasToTempFilePath + canvas 2d 节点对象导出

• 其他端（H5/App）：回退使用 uni.canvasToTempFilePath + canvasId

• 导出格式为 PNG，质量 1，分辨率适配 DPR

上传到服务器

onConfirm(tempFilePath) {
  uni.uploadFile({
    url: 'https://your.server.com/upload',
    filePath: tempFilePath,
    name: 'file',
    success: (res) => {
      const data = JSON.parse(res.data)
      // data 为服务器返回的图片地址等信息
    }
  })
}

注意事项

• 仅在微信小程序端完整验证（canvas 2d 标准）

• type="2d" 为微信 canvas 2d 规范，需要基础库 2.10.0 及以上

• 同一页面可使用多个实例，组件内部已为每个 canvas 生成唯一 id

• 画布和按钮区均水平居中，宽度由 width prop 控制