当前位置：首页 > news >正文

前端如何实现签名功能

news 2026/2/8 15:59:37

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）来保存签名。
性能优异：对于高分辨率的签名场景，提供了平滑的绘图体验。

总结

手动实现签名功能 适合更灵活的场景，但需要较多的手动编写。
使用 Signature Pad 或 vue-signature-pad 等库，可以简化实现，并提供更完善的功能，适用于PC端和移动端的签名需求。

前端如何实现签名功能

1.JS实现前端实现签名功能，通常是通过在页面上创建一个可绘制的区域，用户可以用鼠标或触摸设备进行签名。这个区域通常是一个<canvas>元素，结合JavaScript来处理绘制和保存签名。下面是一个简单的实现步骤： 1.1. 创建HTM…...

编程日记 2024/12/12 16:32:39

若依将数据库更改为SQLite

文章目录 1. 添加依赖项2. 更新配置文件 application-druid.yml2.1. 配置数据源2.2. 配置连接验证 3. 更新 MybatisPlusConfig4. 解决 mapper 中使用 sysdate() 的问题4.1. 修改 BaseEntity4.2. 修改 Mapper 5. 更新 YML 配置正文开始： 前提条件：在您的…...

编程日记 2024/12/12 16:30:37

CRMEB Pro版v3.2源码全开源+PC端+Uniapp前端+搭建教程

一.介绍 crmeb pro版 v3.2正式发布，全新UI重磅上线，焕然一新，不负期待！页面DIY设计功能全面升级，组件更丰富，样式设计更全面；移动端商家管理，让商城管理更便捷，还从页面…...

编程日记 2024/12/12 16:28:34

准备：已安装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…...

编程日记 2024/12/12 16:27:33

【OpenCV】模板匹配

理论模板匹配是一种在较大图像中搜索和查找模板图像位置的方法。为此，OpenCV 带有一个函数 cv.matchTemplate（） 。它只是在输入图像上滑动模板图像（如在 2D 卷积中），并比较模板图像下的模板和输入图像的补…...

编程日记 2024/12/12 16:25:31

黑马商城微服务复习（5）

MQ 一、同步调用和异步调用1. 同步调用2. 异步调用二、RabbitMQ1. 基础使用2. 实际操作怎么用?3. RabbitMQ虚拟主机数据隔离4. 在JAVA中实现RabbitMQ5. 交换机种类一、同步调用和异步调用 1. 同步调用微服务一旦拆分，必然涉及到服务之间的相互调用&#xff…...

编程日记 2024/12/12 16:23:28

云原生基础设施指南：精通 Kubernetes 核心与高级用法

1. 云原生的诞生随着互联网规模的不断增长，以及企业对敏捷开发、快速交付和高可用性的需求日益增强，传统的单体架构逐渐暴露出局限性，难以满足现代业务对动态扩展和高效迭代的要求。为此，云原生应运而生。云原生是为云计算时代…...

编程日记 2024/12/12 16:21:25

人工智能概要

目录前言1.什么是人工智能（Artificial Intelligence, AI）2.人工智能发展的三次浪潮2.1 人工智能发展的第一次浪潮2.2 人工智能发展的第二次浪潮2.3 人工智能发展的第三次浪潮 3.人工智能发展的必备三要素3.1 数据3.2 算法（algorithm&#xf…...

编程日记 2024/12/12 16:19:22

qt QCommandLineParser详解

1、概述 QCommandLineParser是Qt框架中提供的一个类，专门用于解析命令行参数。它简化了命令行参数的处理过程，使得开发者能够轻松定义、解析和验证命令行选项和参数。QCommandLineParser适用于需要从命令行获取输入的控制台应用程序，以及需要…...

编程日记 2024/12/12 16:18:20

力扣 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…...

编程日记 2024/12/12 16:14:15

cnocr配置及训练测试

cnocr配置及训练测试 1，相关链接2，已有模型调用测试（1）下载相关模型（2）Cnstd文本检测模型（3）模型调用解析脚本 3，自定义数据集训练测试（1）标签转换…...

编程日记 2024/12/12 16:12:13

解决 Flutter 在 Mac 上的编译错误

解决 Flutter 在 Mac 上的编译错误在使用 Flutter 进行项目开发并尝试在 Mac 设备上进行编译时，遇到了一系列的错误信息，这些错误信息给项目的构建与部署带来了阻碍。一、错误详情在编译过程中，Xcode 输出了大量的信息，其中…...

编程日记 2024/12/12 16:09:08

MR30分布式IO在新能源领域加氢站的应用

导读氢能被誉为21世纪最具发展潜力的清洁能源，氢能科技创新和产业发展持续得到各国青睐。氢能低碳环保，燃烧的产物只有水，是用能终端实现绿色低碳转型的重要载体。氢能产业链分别为上游制氢、中游储运以及下游用氢。上游制氢工艺目前大部分…...

编程日记 2024/12/12 16:05:02

wxPython中wx.ListCtrl用法（二）

wx.ListCtrl是一个列表组件，可以以列表视图（list view）、报表视图（report view）、图标视图（icon view）和小图标视图（small icon view）等多种模式显示列表。一、方法 __…...

编程日记 2024/12/12 16:04:00

kubernetes 资源汇总

kubernetes 资源汇总官网英文文档官方英文文档中文文档官方中文文档 github github源码地址培训认证也就是linux基金会的认证，上面也提供培训课程下载资源官网下载资源，国内的话k8s镜像下载不了，要去镜像站在线练习 killer…...

编程日记 2024/12/12 16:00:56

每日一题（对标gesp三级答案将在第二天公布）

编程题题目描述： 小杨为数字4,5,6和7设计了一款表示形式，每个数字占用了66的网格。数字4,5,6和7的表示形式如下（此处自行设计复杂一些的表示形式示例）： 数字4： …. …. …. …. *… 数字5： …...

编程日记 2024/12/12 15:59:55

让 Win10 上网本 Debug 模式 QUDPSocket 信号槽收发不丢包的方法总结

在前两篇文章里，我们探讨了不少UDP丢包的解决方案。经过几年的摸索测试，其实方法非常简单, 无需修改代码。 1. Windows 下设置UDP缓存这个方法可以一劳永逸解决UDP的收发丢包问题，只要添加注册表项目并重启即可。即使用Qt的信号与槽&#…...

编程日记 2024/12/12 15:55:49

Python爬虫之使用BeautifulSoup进行HTML Document文档的解析

BeautifulSoup 是一个用于解析 HTML 和 XML 文档的 Python 库，它为开发者提供了一种简单的方式来查找、遍历和修改文档树。BeautifulSoup 特别擅长处理不规则或格式不佳的标记语言，可以自动更正无效的 HTML，因此在网页抓取（Web Sc…...

编程日记 2024/12/12 15:54:46

vue.config.js配置参数说明新手教程

这篇文章主要是对vue.config.js配置文件的主要参数进行一下说明，方便使用时的查询， 下面进行介绍 1、vue.config.js vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被…...

编程日记 2024/12/12 15:52:42

C# 关于加密技术以及应用(二)

AES（Advanced Encryption Standard）和 RSA（Rivest-Shamir-Adleman）是两种不同的加密算法，它们各自有特定的使用场景和优势。下面是它们的主要区别和适用场景： AES（高级加密标准） 特…...

编程日记 2024/12/12 15:50:40

HTML 列表、表格、表单

1 列表标签作用：布局内容排列整齐的区域列表分类：无序列表、有序列表、定义列表。例如： 1.1 无序列表标签：ul 嵌套 li，ul是无序列表，li是列表条目。注意事项： ul 标签里面只能包裹 li…...

编程新知 2026/1/24 22:33:33

定时器任务——若依源码分析

分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...

编程新知 2026/1/26 14:24:46

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。一、源型模式的定义原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点：避免重复初…...

编程新知 2026/2/7 10:59:04

React19源码系列之事件插件系统

事件类别事件类型定义文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

Linux云原生安全：零信任架构与机密计算

Linux云原生安全：零信任架构与机密计算构建坚不可摧的云原生防御体系引言：云原生安全的范式革命随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

Java入门学习详细版（一）

大家好，Java 学习是一个系统学习的过程，核心原则就是“理论实践坚持”，并且需循序渐进，不可过于着急，本篇文章推出的这份详细入门学习资料将带大家从零基础开始，逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

A2A JS SDK 完整教程：快速入门指南

目录什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24