更新记录

1.0.4（2025-04-04） 下载此版本

修复安卓APP签名失败的问题

1.0.3（2025-04-04） 下载此版本

演示截图

1.0.2（2025-04-04） 下载此版本

文档添加示例

平台兼容性

gp-signature 电子签名组件使用文档

简介

gp-signature 是一个功能强大的电子签名组件，适用于 uni-app 项目。支持多平台（H5、App、小程序），提供流畅的签名体验，并具有撤销、重做、清除等功能。组件支持多种输出格式，包括 PNG 和 JPEG，还提供一键生成签名功能。

特性

• 多平台支持：H5、App、各类小程序
• 流畅的签名体验，支持压力感应（在支持的设备上）
• 贝塞尔曲线平滑处理
• 支持撤销/重做操作
• 自定义画布大小、线条颜色和宽度
• 支持网格背景
• 自定义占位符文本
• 多种输出格式：PNG、JPEG
• 可调整输出分辨率和质量
• 一键生成签名功能（支持多种字体样式和倾斜角度）

安装方法

在 uni-app 项目中，通过 uni_modules 导入该组件：

1. 在 HBuilderX 中打开项目
2. 点击菜单栏的 "工具" -> "插件市场"
3. 搜索 "gp-signature"
4. 点击安装

基本用法

Vue3 示例（使用组合式API）

<template>
  <view class="container">
    <gp-signature
      ref="signatureRef"
      :line-width="lineWidth"
      :line-color="lineColor"
      :background-color="backgroundColor"
      :show-grid="showGrid"
      :output-type="outputType"
      @confirm="onConfirm"
    />

    <button @click="saveSignature">保存签名</button>
    <button @click="clearSignature">清除</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import GpSignature from '@/uni_modules/gp-signature/components/gp-signature/gp-signature.vue';

// 签名组件引用
const signatureRef = ref(null);

// 签名设置
const lineWidth = ref(3);
const lineColor = ref('#000000');
const backgroundColor = ref('#ffffff');
const showGrid = ref(true);
const outputType = ref('png');

// 签名图片
const signatureImage = ref('');

// 事件处理
const onConfirm = (result) => {
  console.log('签名确认', result);
  if (!result.isEmpty) {
    signatureImage.value = result.base64;
    uni.showToast({
      title: '签名已确认',
      icon: 'success'
    });
  }
};

// 操作方法
const clearSignature = () => {
  signatureRef.value?.clear();
  signatureImage.value = '';
};

const saveSignature = async () => {
  try {
    const result = await signatureRef.value?.confirm();
    if (result && !result.isEmpty) {
      // 保存图片到相册
      uni.saveImageToPhotosAlbum({
        filePath: result.base64,
        success: () => {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });
        },
        fail: (err) => {
          console.error('保存失败', err);
        }
      });
    } else {
      uni.showToast({
        title: '请先签名',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('保存签名失败', error);
  }
};
</script>

Vue2 示例（选项式API）

<template>
  <view class="container">
    <gp-signature
      ref="signatureRef"
      :line-width="lineWidth"
      :line-color="lineColor"
      :background-color="backgroundColor"
      :show-grid="showGrid"
      :output-type="outputType"
      @confirm="onConfirm"
    />

    <button @click="saveSignature">保存签名</button>
    <button @click="clearSignature">清除</button>
  </view>
</template>

<script>
import GpSignature from '@/uni_modules/gp-signature/components/gp-signature/gp-signature.vue';

export default {
  components: {
    GpSignature
  },
  data() {
    return {
      lineWidth: 3,
      lineColor: '#000000',
      backgroundColor: '#ffffff',
      showGrid: true,
      outputType: 'png',
      signatureImage: ''
    };
  },
  methods: {
    onConfirm(result) {
      console.log('签名确认', result);
      if (!result.isEmpty) {
        this.signatureImage = result.base64;
        uni.showToast({
          title: '签名已确认',
          icon: 'success'
        });
      }
    },

    clearSignature() {
      this.$refs.signatureRef.clear();
      this.signatureImage = '';
    },

    async saveSignature() {
      try {
        const result = await this.$refs.signatureRef.confirm();
        if (result && !result.isEmpty) {
          // 保存图片到相册
          uni.saveImageToPhotosAlbum({
            filePath: result.base64,
            success: () => {
              uni.showToast({
                title: '保存成功',
                icon: 'success'
              });
            },
            fail: (err) => {
              console.error('保存失败', err);
            }
          });
        } else {
          uni.showToast({
            title: '请先签名',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('保存签名失败', error);
      }
    }
  }
};
</script>

完整示例（参考index.vue）

以下是一个完整的示例，包含了线条粗细、颜色选择、网格设置、输出格式设置以及一键签名功能：

<template>
  <view class="content">
    <gp-signature 
      ref="signatureRef"
      :line-width="lineWidth"
      :line-color="lineColor"
      :background-color="backgroundColor"
      :show-grid="showGrid"
      :grid-size="gridSize"
      :grid-color="gridColor"
      :placeholder="placeholder"
      :output-type="outputType"
      :output-scale="outputScale"
      @confirm="onConfirm"
      @clear="onClear"
      @change="onChange"
      @error="onError"
    />

    <!-- 设置面板 -->
    <view class="settings">
      <!-- 线条粗细设置 -->
      <view class="setting-item">
        <text>线条粗细:</text>
        <view class="number-selector">
          <button class="number-btn" @click="decreaseLineWidth">-</button>
          <text class="number-value">{{ lineWidth }}</text>
          <button class="number-btn" @click="increaseLineWidth">+</button>
        </view>
      </view>

      <!-- 线条颜色选择 -->
      <view class="setting-item">
        <text>线条颜色:</text>
        <view class="color-picker">
          <view 
            v-for="color in colors" 
            :key="color" 
            class="color-item" 
            :style="{ backgroundColor: color }"
            :class="{ active: lineColor === color }"
            @click="lineColor = color"
          ></view>
        </view>
      </view>

      <!-- 一键签名功能 -->
      <view class="setting-item">
        <text>一键签名:</text>
        <view class="auto-signature-container">
          <view class="auto-signature-input">
            <input 
              type="text" 
              v-model="autoSignatureName" 
              placeholder="输入姓名" 
              class="name-input"
            />
            <button type="default" @click="generateAutoSignature" class="generate-btn">生成</button>
          </view>

          <view class="auto-signature-options">
            <view class="setting-item">
              <text>字体样式:</text>
              <picker :range="fontStyles" :value="fontStyleIndex" @change="onFontStyleChange">
                <view class="picker-value">{{ fontStyles[fontStyleIndex] }}</view>
              </picker>
            </view>

            <view class="setting-item">
              <text>倾斜角度:</text>
              <view class="number-selector">
                <button class="number-btn" @click="decreaseAngle">-</button>
                <text class="number-value">{{ signatureAngle }}°</text>
                <button class="number-btn" @click="increaseAngle">+</button>
              </view>
            </view>

            <view class="setting-item">
              <text>手写效果</text>
              <switch :checked="handwritingEffect" @change="onHandwritingEffectChange"></switch>
            </view>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="buttons">
        <button type="default" @click="clearSignature">清除</button>
        <button type="default" @click="undoSignature">撤销</button>
        <button type="primary" @click="saveSignature">保存签名</button>
      </view>
    </view>

    <!-- 签名预览 -->
    <view class="preview" v-if="signatureImage">
      <text class="preview-title">签名预览</text>
      <image :src="signatureImage" mode="widthFix" class="signature-image"></image>
    </view>
  </view>
</template>

属性说明

事件说明

方法说明

自动签名选项

autoSign 方法的 options 参数支持以下选项：

平台兼容性说明

• H5/App：完整支持所有功能
• 小程序：基本功能支持，但部分平台可能存在差异
• 压力感应：仅在支持的设备上可用（如Apple Pencil、支持压力感应的触控屏）

注意事项

1. 在小程序环境中，保存图片到相册需要用户授权
2. 输出分辨率过高可能会影响性能
3. 自动签名功能在不同平台上的字体效果可能有所差异

演示截图

支持作者

如果觉得这个组件对你有帮助，可以请作者喝杯咖啡，支持作者继续开发更多好用的组件。

AliPay

WePay

LICENSE

MIT