Vue 实现电子签名并生成签名图片
目录
- 前言
- 项目结构
- 代码实现
- 安装依赖
- 创建签名画布组件
- 生成签名图片
- 总结
- 相关阅读

1. 前言
电子签名在现代Web应用中越来越普遍,例如合同签署、确认表单等。本文将介绍如何使用Vue.js实现一个简单的电子签名功能,并将签名生成图片。
2. 项目结构
项目结构如下:
my-vue-signature/
├── public/
│ └── index.html
├── src/
│ ├── components/
│ │ └── SignaturePad.vue
│ ├── App.vue
│ ├── main.js
├── package.json
└── README.md
3. 代码实现
3.1 安装依赖
我们将使用一个轻量级的签名画布库 signature_pad,通过npm安装:
如果想学习signature_pad点击链接 - signature_pad 库详解
npm install signature_pad
3.2 创建签名画布组件
在 src/components 文件夹下创建 SignaturePad.vue 文件:
<template><div><canvas ref="signatureCanvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="endDrawing" @mouseleave="endDrawing"></canvas><button @click="clearCanvas">清除</button><button @click="saveSignature">保存签名</button></div></template><script>import SignaturePad from 'signature_pad';export default {name: 'SignaturePad',data() {return {signaturePad: null,isDrawing: false,};},mounted() {const canvas = this.$refs.signatureCanvas;canvas.width = 600;canvas.height = 300;this.signaturePad = new SignaturePad(canvas);},methods: {startDrawing() {this.isDrawing = true;this.signaturePad.beginPath();},draw(event) {if (!this.isDrawing) return;const rect = this.$refs.signatureCanvas.getBoundingClientRect();this.signaturePad.lineTo(event.clientX - rect.left, event.clientY - rect.top);this.signaturePad.stroke();},endDrawing() {this.isDrawing = false;this.signaturePad.closePath();},clearCanvas() {this.signaturePad.clear();this.$emit('clean')},saveSignature() {if (this.signaturePad.isEmpty()) {alert('请先签名!');return;}const dataURL = this.signaturePad.toDataURL();this.$emit('save-signature', dataURL);},},};</script><style scoped>canvas {border: 1px solid #ccc;display: block;margin-bottom: 10px;}button {margin-right: 10px;}</style>
3.3 在 App.vue 中使用组件并生成签名图片
<template><div id="app"><div class="center"><h1>电子签名</h1><SignaturePad @save-signature="handleSaveSignature" @clean="handleClean" /><div ><h2>签名图片:</h2><div class="showimg"><img v-if="signatureImage" :src="signatureImage" alt="Signature" /></div></div></div></div>
</template><script>
import SignaturePad from './components/SignaturePad.vue';export default {name: 'App',components: {SignaturePad,},data() {return {signatureImage: null,};},methods: {handleSaveSignature(dataURL) {this.signatureImage = dataURL;},handleClean(){this.signatureImage = null}},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;margin-top: 60px;display: flex;justify-content: center;align-items: center;flex-direction: column
}
.center{}
.showimg{border-radius: 4px;border: 1px solid #ccc;padding: 10px;box-sizing: border-box;width: 610px;height: 310px;
}
</style>
4. 总结
通过本文,你学习了如何使用Vue.js和 signature_pad 库实现一个简单的电子签名功能,并生成签名图片。通过这种方式,可以轻松地在Web应用中集成电子签名功能,提高用户体验。
5. 相关阅读
- Signature Pad 文档
- Vue.js 官方文档
希望本文能帮助你实现电子签名功能。如果有任何问题或建议,请随时联系。祝你开发顺利!
相关文章:
Vue 实现电子签名并生成签名图片
目录 前言项目结构代码实现 安装依赖创建签名画布组件生成签名图片 总结相关阅读 1. 前言 电子签名在现代Web应用中越来越普遍,例如合同签署、确认表单等。本文将介绍如何使用Vue.js实现一个简单的电子签名功能,并将签名生成图片。 2. 项目结构 项…...
Visual Studio 2022美化
说明: VS版本:Visual Studio Community 2022 背景美化 【扩展】【管理扩展】搜索“ClaudiaIDE”,【下载】,安装完扩展要重启VS 在wallhaven下载壁纸图片作为文本编辑器区域背景图片 【工具】【选项】搜索ClaudiaIDEÿ…...
[CISCN2019 华东南赛区]Web11
进来先做信息收集,右上角显示当前ip,然后有api的调用地址和请求包的格式以及最重要的是最下面的smarty模版,一看到这个就得想到smarty模版注入 测试了一下两个api都无法访问 直接切到数据包看看能不能通过XFF来修改右上角ip 成功修改&#x…...
【图形图像-1】SDF
在图形图像处理中,SDF(Signed Distance Field,带符号的距离场)是一种表示图形轮廓和空间距离的数学结构。它通常用于计算机图形学、文本渲染、碰撞检测和物理模拟等领域。 SDF(Signed Distance Field,带符号…...
苍穹外卖01
0. 配置maven (仅一次的操作 1.项目导入idea 2. 保证nginx服务器运行 (nginx.exe要在非中文的目录下) 开启服务: start nginx 查看任务进程是否存在: tasklist /fi "imagename eq nginx.exe" 关闭ngi…...
ElasticSearch(三)—文档字段参数设置以及元字段
一、 字段参数设置 analyzer: 指定分词器。elasticsearch 是一款支持全文检索的分布式存储系统,对于 text类型的字段,首先会使用分词器进行分词,然后将分词后的词根一个一个存储在倒排索引中,后续查询主要是针对词根…...
ARM功耗管理之压力测试和PM_DEBUG实验
安全之安全(security)博客目录导读 ARM功耗管理精讲与实战汇总参见:Arm功耗管理精讲与实战 思考:睡眠唤醒实验?压力测试?Suspend-to-Idle/RAM/Disk演示? 1、实验环境准备 2、软件代码准备 3、唤醒源 4、Suspend-…...
ESP8266用AT指令实现连接MQTT
1准备工作 硬件(ESP8266)连接电脑 硬件已经烧入了MQTT透传固件 2实现连接 2-1(进入AT模式) 打开串口助手发送如下指令 AT 2-2(复位) ATRST 2-3(开启DHCP,自动获取IP&#x…...
人工智能与机器学习原理精解【5】
文章目录 最优化基础理论特征值(Eigenvalue)特征向量(Eigenvector)特征值和特征向量的重要性计算方法特征值一、特征值分解的定义二、特征值分解的算法三、特征值分解的例子 正定矩阵Hessian矩阵的特征值Hessian矩阵的含义Hessian…...
为什么用LeSS?
实现适应性 LeSS是一个产品开发的组织系统,旨在最大化一个组织的适应性。关于适应性(或者敏捷性,也就是敏捷开发的初衷)我们是指优化: 以相对低的成本改变方向的能力,主要是基于通过频繁交付产生的探索。从…...
力扣高频SQL 50题(基础版)第七题
文章目录 力扣高频SQL 50题(基础版)第七题1068. 产品销售分析 I题目说明思路分析实现过程准备数据:实现方式:结果截图:总结: 力扣高频SQL 50题(基础版)第七题 1068. 产品销售分析 I 题目说明 …...
【音视频】一篇文章区分直播与点播、推流与拉流
文章目录 前言直播和点播的概念及区别直播是什么点播是什么 直播和点播的区别举例说明推流与拉流推流是什么拉流是什么 推流与拉流的区别举例说明 总结 前言 在音视频领域,直播、点播、推流和拉流是常见的概念,每个术语都有其特定的含义和应用场景。了解…...
3d动画软件blender如何汉化?(最新版本4.2)
前言 Blender是一个非常强大的3d动画软件,总能受到大量工作者的青睐。 但是,对于新手来说(尤其是英语学渣),语言是个难事。大部分blender打开时都是英文,对新手使用具有一定的障碍。因此,我们需…...
C++学习笔记04-补充知识点(问题-解答自查版)
前言 以下问题以Q&A形式记录,基本上都是笔者在初学一轮后,掌握不牢或者频繁忘记的点 Q&A的形式有助于学习过程中时刻关注自己的输入与输出关系,也适合做查漏补缺和复盘。 本文对读者可以用作自查,答案在后面࿰…...
Vue el-table的自定义排序返回值为null,设置刷新页面保持排序标志,导航时elementui组件不更新
自定义排序使用sort-change"sortChange"监听,表列需设置为sortable“custom”(自定义) <el-table:data"tableData"bordersort-change"sortChange":default-sort"{prop:sortProp,order:sortOrder}&quo…...
一起笨笨的学C ——16链表基础
目录 目录 前言 正文 链表定义: 基本创建链表程序: 链表结点插入: 对角线记忆法: 画图理解法: 链表结点删除: 链表销毁: 后语 前言 链表理解方法分享,愿你的大脑也能建立一个…...
信息学奥赛一本通1917:【01NOIP普及组】装箱问题
1917:【01NOIP普及组】装箱问题 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 4178 通过数: 2473 【题目描述】 有一个箱子容量为VV(正整数,0≤V≤200000≤V≤20000),同时有n个物品(0≤n≤300≤n≤30),…...
android user 版本如何手动触发dump
项目需要在android user版本增加手动触发dump方法,用以确认user版本发生dump后系统是重启还是真正发生dump卡机! 本文以qcom平台项目为例描述所做的修改,留下足迹以备后忘。 闲言少叙,开整上干货: 一、修改bin文件 …...
RedHat Linux 7.5 安装 mssql-server
RedHat Linux 7.5 安装 mssql-server 1、安装部署所需的依赖包 [rootlocalhost ~]# yum -y install libatomic bzip2 gdb cyrus-sasl cyrus-sasl-gssapi Loaded plugins: ulninfo Resolving Dependencies --> Running transaction check ---> Package bzip2.x86_64 0:1…...
Vue的SSR和预渲染:提升首屏加载速度与SEO效果
引言 在现代Web应用开发中,首屏加载速度和搜索引擎优化(SEO)是衡量应用性能的重要指标。Vue.js 作为流行的前端框架,提供了服务器端渲染(SSR)和预渲染(prerendering)两种技术来提升这些指标。本文将深入探讨如何使用 Vue 的 SSR 和预渲染技术,提供详细的代码示例和最…...
龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...
【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
UE5 学习系列(三)创建和移动物体
这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式(Singleton Pattern&#…...
从零实现STL哈希容器:unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说,直接开始吧! 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
