GitHub - WangShayne/vue3-signature: Electronic signature for Vue3 (original) (raw)

✍️ Vue3 Signature

A smooth and elegant electronic signature component for Vue 3

Powered by signature_pad - The most popular HTML5 canvas based signature library

🎮 Try Online •✨ Features •🚀 Quick Start •📖 Documentation •💡 Examples

English | 简体中文

🎮 Try Online

Experience Vue3 Signature without any installation:

👉 Live Demo on GitHub Pages - Try all features in your browser!

The demo showcases all component features including drawing, saving, undo, watermarks, and more.

🚀 Deploy Your Own Demo

Want to deploy your own demo? Check out our Deployment Guide for detailed instructions on deploying to GitHub Pages.

📁 New: Image Import Feature

The live demo now supports importing images:

• 📁 Upload local image files
• 🔗 Load images from URLs
• 🖼️ Try sample images with one click

Perfect for editing existing signatures, adding annotations, or working with templates!

✨ Features

🎯 Core Technology

Built on top of signature_pad by Szymon Nowak - the industry-standard HTML5 canvas based smooth signature drawing library with 13k+ GitHub stars and proven reliability.

⚡ Key Features

• 📱 Touch & Mouse Support - Works seamlessly on both mobile and desktop devices
• 🎨 Customizable - Fully customizable pen color, background, and signature styles
• 💾 Multiple Export Formats - Export signatures as PNG, JPEG, or SVG
• 🔄 Undo Support - Easy undo functionality for better user experience
• 🖼️ Watermark Support - Add custom watermarks to signatures
• 🚫 Disable Mode - Toggle between editable and read-only states
• 📐 Responsive - Automatically adapts to container size
• 🎯 TypeScript Support - Full TypeScript type definitions included
• ⚡ Lightweight - Small bundle size with no unnecessary dependencies
• 🌍 Cross-Platform - Works on all modern browsers and mobile devices

🚀 Quick Start

Installation

Using npm

npm install vue3-signature

Using yarn

yarn add vue3-signature

Using pnpm

pnpm add vue3-signature

Basic Usage

Step 1: Register the component globally

// main.js import { createApp } from "vue"; import Vue3Signature from "vue3-signature"; import App from "./App.vue";

createApp(App).use(Vue3Signature).mount("#app");

Step 2: Use it in your component

<div class="buttons">
  <button @click="save">Save as PNG</button>
  <button @click="clear">Clear</button>
  <button @click="undo">Undo</button>
</div>

📖 Documentation

Props

💡 sigOption accepts the full SignaturePad.Options interface. The component watches it deeply and recreates the pad with your new settings while preserving the current drawing whenever possible.

Methods

Access these methods via the component ref — every public method from signature_pad is available:

Events

All native signature_pad events are forwarded so you can react to drawing lifecycle changes:

Signature Options

import type { Options as SignaturePadOptions } from "signature_pad";

type SigOption = SignaturePadOptions & { // You can still pass anything supported by signature_pad: dotSize, min/maxWidth, throttle, minDistance, etc. };

// Commonly used fields // dotSize?: number; // minWidth?: number; // maxWidth?: number; // minDistance?: number; // throttle?: number; // velocityFilterWeight?: number; // penColor?: string; // backgroundColor?: string; // compositeOperation?: GlobalCompositeOperation; // canvasContextOptions?: CanvasRenderingContext2DSettings;

Watermark Options

interface WaterMarkOption { text?: string; // Watermark text (default: "") font?: string; // Font style (default: "20px sans-serif") style?: string; // Style type: "all" | "stroke" | "fill" (default: "fill") fillStyle?: string; // Fill color (default: "#333") strokeStyle?: string; // Stroke color (default: "#333") x?: number; // Fill text X position (default: 20) y?: number; // Fill text Y position (default: 20) sx?: number; // Stroke text X position (default: 40) sy?: number; // Stroke text Y position (default: 40) }

Trim Result & Options

interface TrimResult { canvas: HTMLCanvasElement; // The cropped off-screen canvas dataUrl: string; // Convenience data URL generated from the cropped canvas bounds: { x: number; y: number; width: number; height: number }; // Crop rectangle (device pixels) }

interface TrimOptions { format?: string; // Any value accepted by canvas.toDataURL, e.g. "image/png", "image/jpeg" encoderOptions?: number; // Quality argument for JPEG/WebP backgroundColor?: string;// Override the color used to detect empty pixels (defaults to SignaturePad.backgroundColor) }

💡 Examples

Save as Different Formats

<button @click="saveAsPNG">Save as PNG <button @click="saveAsJPEG">Save as JPEG <button @click="saveAsSVG">Save as SVG

Custom Pen Colors and Styles

<Vue3Signature
  ref="signature"
  :sigOption="options"
  :w="'100%'"
  :h="'400px'"
/>

Add Watermark

Disabled Mode (Read-only)

<button @click="toggleDisabled">
  {{ isDisabled ? "Enable" : "Disable" }} Editing
</button>

Load from Data URL

<button @click="loadSignature">Load Saved Signature</button>
<button @click="saveSignature">Save Current Signature</button>

Responsive Design

🔧 Advanced Usage

Complete Example with All Features

<div class="controls">
  <div class="control-group">
    <label>Pen Color:</label>
    <input type="color" v-model="options.penColor" />
  </div>

  <div class="control-group">
    <label>Background:</label>
    <input type="color" v-model="options.backgroundColor" />
  </div>

  <div class="control-group">
    <label>
      <input type="checkbox" v-model="isDisabled" />
      Read-only Mode
    </label>
  </div>
</div>

<Vue3Signature
  ref="signature"
  :sigOption="options"
  :disabled="isDisabled"
  :w="'100%'"
  :h="'400px'"
  class="signature-pad"
/>

<div class="button-group">
  <button @click="save('image/png')" class="btn btn-primary">
    💾 Save PNG
  </button>
  <button @click="save('image/jpeg')" class="btn btn-primary">
    💾 Save JPEG
  </button>
  <button @click="clear" class="btn btn-danger">🗑️ Clear</button>
  <button @click="undo" class="btn btn-secondary">↩️ Undo</button>
  <button @click="addWatermark" class="btn btn-secondary">
    🔖 Add Watermark
  </button>
</div>

<div v-if="preview" class="preview">
  <h3>Preview:</h3>
  <img :src="preview" alt="Signature preview" />
</div>

🌐 Browser Support

Vue3 Signature works on all modern browsers:

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Opera (latest)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 Changelog

See Releases for detailed changelog.

🙏 Credits & Dependencies

Core Dependency

This Vue 3 component is a wrapper around signature_pad - the most popular and reliable HTML5 canvas based signature library.

Why signature_pad?

• ⭐ 13,000+ GitHub Stars - Trusted by thousands of developers worldwide
• 🏆 Industry Standard - Used in countless production applications
• 🎨 Smooth Drawing - Advanced Bézier curve interpolation for natural signatures
• 📱 Touch Optimized - Perfect support for touchscreens and stylus input
• 🔧 Well Maintained - Active development and regular updates
• 📦 Lightweight - Minimal footprint with maximum functionality

Library Information:

• Author: Szymon Nowak
• Repository: github.com/szimek/signature_pad
• License: MIT
• Current Version: 5.1.1

By using Vue3 Signature, you get all the power of signature_pad with the simplicity of Vue 3's Composition API.

📄 License

MIT License

Copyright (c) 2024 Shayne Wang

🔗 Related Projects

• vue-signature - Vue 2.x version
• signature_pad - The underlying signature library

Made with ❤️ by Shayne Wang
If this project helped you, please consider giving it a ⭐️

### Remove Blank Space Around the Signature

The implementation is based on the popular workaround described here: the component copies the current canvas, crops out the empty pixels, and returns the cropped data URL without mutating the visible canvas. Use it on @end to keep a continuously trimmed value if needed.