更新记录

1.0.0（2025-12-31） 下载此版本

功能

平台兼容性

uni-app(4.62)

signature-board 手写签名板

简介

一个支持横屏手写签名的 Canvas 组件，自动旋转 90 度输出签名图片，完美兼容 H5、微信小程序、APP 等多端平台。

特性

• ✅ 横屏签名：自动旋转 90 度，适合横屏签名场景
• ✅ 多端兼容：完美支持 H5、微信小程序、APP
• ✅ 高度可定制：支持自定义线条颜色、粗细、按钮样式等
• ✅ Base64 输出：直接输出 base64 格式图片，方便上传
• ✅ 无依赖：不依赖任何第三方库
• ✅ Vue2/Vue3：同时支持 Vue2 和 Vue3

安装

方式一：通过 uni_modules 导入（推荐）

1. 在 DCloud 插件市场找到本插件
2. 点击右侧的 使用 HBuilderX 导入插件 或 下载插件ZIP
3. 导入到项目的 uni_modules 目录

方式二：手动导入

将 signature-board 文件夹复制到项目的 uni_modules 目录下。

使用方法

基础使用

<template>
  <view class="page">
    <signature-board
      @cancel="handleCancel"
      @reset="handleReset"
      @confirm="handleConfirm"
    />
  </view>
</template>

<script setup>
const handleCancel = () => {
  console.log('取消签名');
};

const handleReset = () => {
  console.log('重写签名');
};

const handleConfirm = (result) => {
  console.log('签名完成，base64:', result.tempFilePath);
  // 可以将 result.tempFilePath 上传到服务器
};
</script>

<style scoped>
.page {
  width: 100vw;
  height: 100vh;
}
</style>

自定义样式

<template>
  <signature-board
    :lineWidth="5"
    lineColor="#FF0000"
    bgColor="#F0F0F0"
    primaryColor="#007AFF"
    resetBgColor="#999999"
    cancelText="返回"
    resetText="清空"
    confirmText="完成"
    emptyTip="请先进行签名"
    errorTip="签名生成失败，请重试"
    @confirm="handleConfirm"
  />
</template>

API

Props

Events

confirm 事件返回值

{
  tempFilePath: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...' // base64 格式的签名图片
}

注意事项

1. 容器尺寸：组件会占满父容器的 100% 宽高，请确保父容器有明确的尺寸
2. 横屏签名：组件设计为横屏使用，输出的图片会自动旋转 90 度
3. 图片格式：输出的图片为 PNG 格式的 base64 字符串
4. 平台差异：
   • H5 端使用 DOM Canvas 进行旋转
   • 小程序端使用 Canvas API 进行旋转
   • APP 端使用 compressImage API 进行旋转

常见问题

1. 签名图片如何上传？

const handleConfirm = async (result) => {
  // 方式一：直接上传 base64
  await uploadToServer(result.tempFilePath);

  // 方式二：转换为文件后上传
  const file = base64ToFile(result.tempFilePath);
  await uploadFile(file);
};

2. 如何设置画布大小？

组件会自动占满父容器，通过设置父容器的尺寸来控制画布大小：

<view style="width: 100vw; height: 100vh;">
  <signature-board />
</view>

3. 小程序中签名不流畅？

确保在 canvas 上添加了 disable-scroll 属性（组件已内置）。

更新日志

查看 changelog.md

许可证

MIT License