前端如何实现签名功能
1.JS实现
前端实现签名功能，通常是通过在页面上创建一个可绘制的区域，用户可以用鼠标或触摸设备进行签名。这个区域通常是一个<canvas>元素，结合JavaScript来处理绘制和保存签名。下面是一个简单的实现步骤：
1.1. 创建HTML页面
首先，需要在页面中添加一个<canvas>元素，用于用户签名。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Signature Pad</title><style>canvas {border: 1px solid #000;width: 100%;max-width: 600px;height: 300px;}button {margin-top: 10px;}</style>
</head>
<body><h1>Signature Pad</h1><canvas id="signatureCanvas"></canvas><br><button id="clearButton">Clear</button><button id="saveButton">Save</button><img id="savedImage" alt="Saved Signature" style="display:none;" /><script src="signature.js"></script>
</body>
</html>
1.2. 添加JavaScript来处理签名
接下来，在signature.js中编写JavaScript代码来处理签名的绘制、清除和保存。
// 获取Canvas元素和2D绘图上下文
const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');// 设定Canvas尺寸
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;// 初始化绘图状态
let drawing = false;
let lastX = 0;
let lastY = 0;// 开始绘制
canvas.addEventListener('mousedown', (e) => {drawing = true;[lastX, lastY] = [e.offsetX, e.offsetY];
});canvas.addEventListener('mousemove', (e) => {if (!drawing) return;ctx.beginPath();ctx.moveTo(lastX, lastY);ctx.lineTo(e.offsetX, e.offsetY);ctx.stroke();[lastX, lastY] = [e.offsetX, e.offsetY];
});canvas.addEventListener('mouseup', () => drawing = false);
canvas.addEventListener('mouseout', () => drawing = false);// 移动端支持
canvas.addEventListener('touchstart', (e) => {drawing = true;const touch = e.touches[0];const rect = canvas.getBoundingClientRect();[lastX, lastY] = [touch.clientX - rect.left, touch.clientY - rect.top];
});canvas.addEventListener('touchmove', (e) => {if (!drawing) return;const touch = e.touches[0];const rect = canvas.getBoundingClientRect();ctx.beginPath();ctx.moveTo(lastX, lastY);ctx.lineTo(touch.clientX - rect.left, touch.clientY - rect.top);ctx.stroke();[lastX, lastY] = [touch.clientX - rect.left, touch.clientY - rect.top];
});canvas.addEventListener('touchend', () => drawing = false);// 清除Canvas
document.getElementById('clearButton').addEventListener('click', () => {ctx.clearRect(0, 0, canvas.width, canvas.height);
});// 保存签名为图片
document.getElementById('saveButton').addEventListener('click', () => {const dataURL = canvas.toDataURL('image/png');const img = document.getElementById('savedImage');img.src = dataURL;img.style.display = 'block';
});
1.3. 关键点解释
- Canvas绘图：通过监听
mousedown、mousemove、mouseup事件来检测鼠标的操作，并根据鼠标的移动轨迹在<canvas>上绘制线条。 - 移动端支持：监听
touchstart、touchmove和touchend事件，确保在触屏设备上也能绘制签名。 - 清除签名：通过
clearRect方法清除canvas的内容。 - 保存签名：通过
canvas.toDataURL()方法将签名转换为图片数据，并显示在页面上。
1.4. 额外功能
-
下载签名图片：可以进一步实现下载签名图片的功能，使用
<a>标签和download属性。const downloadButton = document.createElement(‘a’);
downloadButton.href = dataURL;
downloadButton.download = ‘signature.png’;
downloadButton.click();
1.5. 使用库简化开发
如果需要更加复杂和完善的功能，可以使用第三方库，例如Signature Pad，它提供了更多配置和功能。
2.Vue实现
在Vue项目中实现PC端和移动端的签名功能，通常会使用<canvas>元素结合JavaScript绘图，或使用专门的签名组件库来简化实现。以下是实现签名功能的两个推荐方法：
方法 1: 手动实现签名功能（使用 <canvas>）
你可以在Vue中手动实现签名功能，类似于前端原生<canvas>实现的方法。
（1） 创建签名组件
首先，创建一个Vue组件来处理签名功能。
<template><div><h2>Signature Pad</h2><canvas ref="signatureCanvas" class="signature-canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing" @mouseout="stopDrawing"@touchstart="startDrawing" @touchmove="draw" @touchend="stopDrawing"></canvas><button @click="clearCanvas">Clear</button><button @click="saveSignature">Save</button><img v-if="savedImage" :src="savedImage" alt="Signature Image" /></div>
</template><script>
export default {data() {return {drawing: false,lastX: 0,lastY: 0,ctx: null,savedImage: null};},mounted() {const canvas = this.$refs.signatureCanvas;canvas.width = canvas.offsetWidth;canvas.height = canvas.offsetHeight;this.ctx = canvas.getContext("2d");this.ctx.lineWidth = 2;this.ctx.strokeStyle = "#000";},methods: {startDrawing(event) {this.drawing = true;const { x, y } = this.getMousePosition(event);this.lastX = x;this.lastY = y;},draw(event) {if (!this.drawing) return;const { x, y } = this.getMousePosition(event);this.ctx.beginPath();this.ctx.moveTo(this.lastX, this.lastY);this.ctx.lineTo(x, y);this.ctx.stroke();this.lastX = x;this.lastY = y;},stopDrawing() {this.drawing = false;},clearCanvas() {const canvas = this.$refs.signatureCanvas;this.ctx.clearRect(0, 0, canvas.width, canvas.height);},saveSignature() {const canvas = this.$refs.signatureCanvas;this.savedImage = canvas.toDataURL("image/png");},getMousePosition(event) {const rect = this.$refs.signatureCanvas.getBoundingClientRect();const x = event.clientX || event.touches[0].clientX - rect.left;const y = event.clientY || event.touches[0].clientY - rect.top;return { x: x - rect.left, y: y - rect.top };}}
};
</script><style>
.signature-canvas {border: 1px solid #000;width: 100%;max-width: 600px;height: 300px;
}
</style>
（2）关键点
- 使用Vue的
mounted钩子获取<canvas>上下文，并初始化绘图环境。 - 通过
mousedown、mousemove、mouseup等事件来处理PC端的绘图操作，同时监听touchstart、touchmove等事件处理移动端的绘图。 saveSignature方法将签名保存为图片（base64格式），并在页面上显示。
方法 2: 使用第三方库 Signature Pad
Signature Pad是一个流行的JavaScript库，支持PC和移动端的签名功能，支持撤销、重做、保存等功能。可以将它集成到Vue中来简化实现。
（1）安装 Signature Pad
首先通过npm安装 signature_pad 库：
npm install signature_pad
（2）创建Vue组件并使用Signature Pad
<template><div><h2>Signature Pad</h2><canvas ref="signatureCanvas" class="signature-canvas"></canvas><button @click="clearCanvas">Clear</button><button @click="saveSignature">Save</button><img v-if="savedImage" :src="savedImage" alt="Signature Image" /></div>
</template><script>
import SignaturePad from 'signature_pad';export default {data() {return {signaturePad: null,savedImage: null};},mounted() {const canvas = this.$refs.signatureCanvas;canvas.width = canvas.offsetWidth;canvas.height = canvas.offsetHeight;this.signaturePad = new SignaturePad(canvas, {backgroundColor: 'rgb(255, 255, 255)', // 白色背景penColor: 'rgb(0, 0, 0)' // 黑色笔迹});},methods: {clearCanvas() {this.signaturePad.clear();},saveSignature() {if (!this.signaturePad.isEmpty()) {this.savedImage = this.signaturePad.toDataURL('image/png');} else {alert("Please provide a signature first.");}}}
};
</script><style>
.signature-canvas {border: 1px solid #000;width: 100%;max-width: 600px;height: 300px;
}
</style>
（3）Signature Pad库的优势
- 跨平台：支持PC端和移动端。
- 撤销功能：你可以调用
signaturePad.undo()来实现撤销功能。 - 保存图片：提供多种格式（如PNG、JPG、SVG）来保存签名。
- 性能优异：对于高分辨率的签名场景，提供了平滑的绘图体验。
推荐的Vue签名组件库
（1）vue-signature-pad
vue-signature-pad 是一个基于 Signature Pad 的 Vue 封装，简化了签名功能的集成和使用。
安装：
npm install vue-signature-pad
使用：
<template><div><VueSignaturePad ref="signaturePad" :options="options" /><button @click="clearSignature">Clear</button><button @click="saveSignature">Save</button><img v-if="savedImage" :src="savedImage" alt="Signature Image" /></div>
</template><script>
import VueSignaturePad from 'vue-signature-pad';export default {components: { VueSignaturePad },data() {return {options: {penColor: 'black',backgroundColor: 'white'},savedImage: null};},methods: {clearSignature() {this.$refs.signaturePad.clear();},saveSignature() {if (!this.$refs.signaturePad.isEmpty()) {this.savedImage = this.$refs.signaturePad.saveSignature();} else {alert("Please provide a signature first.");}}}
};
</script>
（2）vue-canvas-signature
vue-canvas-signature 是另一个常用的签名组件，支持多种自定义选项。
安装：
npm install vue-canvas-signature
使用：
<template><div><vue-canvas-signature ref="canvasSignature" /><button @click="clearSignature">Clear</button><button @click="saveSignature">Save</button><img v-if="savedImage" :src="savedImage" alt="Signature Image" /></div>
</template><script>
import { VueCanvasSignature } from 'vue-canvas-signature';export default {components: { VueCanvasSignature },data() {return {savedImage: null};},methods: {clearSignature() {this.$refs.canvasSignature.clear();},saveSignature() {this.savedImage = this.$refs.canvasSignature.saveAsImage();}}
};
</script>
总结
- 手动实现签名功能 适合更灵活的场景，但需要较多的手动编写。
- 使用
Signature Pad或vue-signature-pad等库，可以简化实现，并提供更完善的功能，适用于PC端和移动端的签名需求。
相关文章：
前端如何实现签名功能
1.JS实现 前端实现签名功能，通常是通过在页面上创建一个可绘制的区域，用户可以用鼠标或触摸设备进行签名。这个区域通常是一个<canvas>元素，结合JavaScript来处理绘制和保存签名。下面是一个简单的实现步骤： 1.1. 创建HTM…...
若依将数据库更改为SQLite
文章目录 1. 添加依赖项2. 更新配置文件 application-druid.yml2.1. 配置数据源2.2. 配置连接验证 3. 更新 MybatisPlusConfig4. 解决 mapper 中使用 sysdate() 的问题4.1. 修改 BaseEntity4.2. 修改 Mapper 5. 更新 YML 配置 正文开始： 前提条件：在您的…...
CRMEB Pro版v3.2源码全开源+PC端+Uniapp前端+搭建教程
一.介绍 crmeb pro版 v3.2正式发布，全新UI重磅上线，焕然一新，不负期待！页面DIY设计功能全面升级，组件更丰富，样式设计更全面；移动端商家管理，让商城管理更便捷，还从页面…...
Docker 安装 Jenkins:2.346.3
准备：已安装Docker，已配置服务器安全组规则 1581 1、拉取镜像 [rootTseng ~]# docker pull jenkins/jenkins:2.346.3 2.346.3: Pulling from jenkins/jenkins 001c52e26ad5: Pull complete 6b8dd635df38: Pull complete 2ba4c74fd680: Pull complet…...
【OpenCV】模板匹配
理论 模板匹配是一种在较大图像中搜索和查找模板图像位置的方法。为此，OpenCV 带有一个函数 cv.matchTemplate（） 。它只是在输入图像上滑动模板图像（如在 2D 卷积中），并比较模板图像下的模板和输入图像的补…...
黑马商城微服务复习（5）
MQ 一、同步调用和异步调用1. 同步调用2. 异步调用 二、RabbitMQ1. 基础使用2. 实际操作 怎么用?3. RabbitMQ虚拟主机 数据隔离4. 在JAVA中实现RabbitMQ5. 交换机种类 一、同步调用和异步调用 1. 同步调用 微服务一旦拆分，必然涉及到服务之间的相互调用ÿ…...
云原生基础设施指南：精通 Kubernetes 核心与高级用法
1. 云原生的诞生 随着互联网规模的不断增长，以及企业对敏捷开发、快速交付和高可用性的需求日益增强，传统的单体架构逐渐暴露出局限性，难以满足现代业务对动态扩展和高效迭代的要求。为此，云原生应运而生。 云原生是为云计算时代…...
人工智能概要
目录 前言1.什么是人工智能（Artificial Intelligence, AI）2.人工智能发展的三次浪潮2.1 人工智能发展的第一次浪潮2.2 人工智能发展的第二次浪潮2.3 人工智能发展的第三次浪潮 3.人工智能发展的必备三要素3.1 数据3.2 算法（algorithm…...
qt QCommandLineParser详解
1、概述 QCommandLineParser是Qt框架中提供的一个类，专门用于解析命令行参数。它简化了命令行参数的处理过程，使得开发者能够轻松定义、解析和验证命令行选项和参数。QCommandLineParser适用于需要从命令行获取输入的控制台应用程序，以及需要…...
力扣 K个一组翻转链表
K个一组翻转链表 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, ListNode *next) : val(x), next(ne…...
cnocr配置及训练测试
cnocr配置及训练测试 1，相关链接2，已有模型调用测试（1）下载相关模型（2）Cnstd文本检测模型（3）模型调用解析脚本 3，自定义数据集训练测试（1）标签转换…...
解决 Flutter 在 Mac 上的编译错误
解决 Flutter 在 Mac 上的编译错误 在使用 Flutter 进行项目开发并尝试在 Mac 设备上进行编译时，遇到了一系列的错误信息，这些错误信息给项目的构建与部署带来了阻碍。 一、错误详情 在编译过程中，Xcode 输出了大量的信息，其中…...
MR30分布式IO在新能源领域加氢站的应用
导读 氢能被誉为21世纪最具发展潜力的清洁能源，氢能科技创新和产业发展持续得到各国青睐。氢能低碳环保，燃烧的产物只有水，是用能终端实现绿色低碳转型的重要载体。氢能产业链分别为上游制氢、中游储运以及下游用氢。上游制氢工艺目前大部分…...
wxPython中wx.ListCtrl用法（二）
wx.ListCtrl是一个列表组件，可以以列表视图（list view）、报表视图（report view）、图标视图（icon view）和小图标视图（small icon view）等多种模式显示列表。 一、方法 __…...
kubernetes 资源汇总
kubernetes 资源汇总 官网 英文文档 官方英文文档 中文文档 官方中文文档 github github源码地址 培训认证 也就是linux基金会的认证，上面也提供培训课程 下载资源 官网下载资源，国内的话k8s镜像下载不了，要去镜像站 在线练习 killer…...
每日一题（对标gesp三级答案将在第二天公布）
编程题 题目描述： 小杨为数字4,5,6和7设计了一款表示形式，每个数字占用了66的网格。数字4,5,6和7的表示形式如下（此处自行设计复杂一些的表示形式示例）： 数字4： …. …. …. …. *… 数字5： …...
让 Win10 上网本 Debug 模式 QUDPSocket 信号槽 收发不丢包的方法总结
在前两篇文章里，我们探讨了不少UDP丢包的解决方案。经过几年的摸索测试，其实方法非常简单, 无需修改代码。 1. Windows 下设置UDP缓存 这个方法可以一劳永逸解决UDP的收发丢包问题，只要添加注册表项目并重启即可。即使用Qt的信号与槽&#…...
Python爬虫之使用BeautifulSoup进行HTML Document文档的解析
BeautifulSoup 是一个用于解析 HTML 和 XML 文档的 Python 库，它为开发者提供了一种简单的方式来查找、遍历和修改文档树。BeautifulSoup 特别擅长处理不规则或格式不佳的标记语言，可以自动更正无效的 HTML，因此在网页抓取（Web Sc…...
vue.config.js配置参数说明新手教程
这篇文章主要是对vue.config.js配置文件的主要参数进行一下说明，方便使用时的查询， 下面进行介绍 1、vue.config.js vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被…...
)
C# 关于加密技术以及应用(二)
AES（Advanced Encryption Standard）和 RSA（Rivest-Shamir-Adleman）是两种不同的加密算法，它们各自有特定的使用场景和优势。下面是它们的主要区别和适用场景： AES（高级加密标准） 特…...
Linux 文件类型，目录与路径，文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件：-（纯文本文件，二进制文件，数据格式文件） 如文本文件、图片、程序文件等。 目录文件：d（directory） 用来存放其他文件或子目录。 设备…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
Robots.txt 文件
什么是robots.txt？ robots.txt 是一个位于网站根目录下的文本文件（如：https://example.com/robots.txt），它用于指导网络爬虫（如搜索引擎的蜘蛛程序）如何抓取该网站的内容。这个文件遵循 Robots…...
PL0语法，分析器实现！
简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用，结合SQLite数据库实现联系人管理功能，并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能，同时可以最小化到系统…...
)
GitHub 趋势日报 (2025年06月06日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...
PHP 8.5 即将发布：管道操作符、强力调试
前不久，PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5！作为 PHP 语言的又一次重要迭代，PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是，借助强大的本地开发环境 ServBay&am…...
pycharm 设置环境出错
pycharm 设置环境出错 pycharm 新建项目，设置虚拟环境，出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...