vue实践：构建高效的电子签名功能

2024-01-30 13:52
文章标签 javascript 高效 构建 实践 功能 vue frontend 电子签名

本文主要是介绍vue实践：构建高效的电子签名功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

在现代数字化时代，电子签名成为了一种方便、高效且安全的签署文件的方式。本文将介绍电子签名的原理和实现方法，帮助你快速掌握这一重要的工具。

电子签名是什么？

电子签名是一种数字化的签名方式，用于验证和确认电子文档、合同或其他电子信息的真实性和完整性。它是传统纸质签名的数字化替代品，具有更高的效率、便捷性和安全性。大家看下面这个例子就会一目了然了。

一、手动实现一个简单的电子签名

下面的示例中，我们使用了 Canvas 元素来绘制用户的签名。当用户按下鼠标左键时，startDrawing 方法会被调用，开始绘制路径。当用户移动鼠标时，draw 方法会被调用，绘制路径。当用户释放鼠标左键时，stopDrawing 方法会被调用，停止绘制路径。点击"清除"按钮会清除 Canvas 上的内容，点击"保存"按钮会将签名保存为 Base64 编码的图片数据。

<template><div><canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas><div><button @click="clearCanvas">清除</button><button @click="saveSignature">保存</button></div></div>
</template><script>
export default {data() {return {isDrawing: false, // 是否正在绘制context: null, // Canvas上下文};},mounted() {this.context = this.$refs.canvas.getContext("2d"); // 获取Canvas上下文this.$refs.canvas.width = 500; // 设置Canvas的宽度this.$refs.canvas.height = 300; // 设置Canvas的高},methods: {// 鼠标按下时触发startDrawing(event) {this.isDrawing = true; // 开始绘制const { offsetX, offsetY } = event; // 获取鼠标相对于Canvas的偏移量this.context.beginPath(); // 开始新的路径this.context.moveTo(offsetX, offsetY); // 将路径移动到鼠标位置},// 当鼠标在 Canvas 上移动时触发draw(event) {if (!this.isDrawing) return; // 如果没有在绘制中，则返回const { offsetX, offsetY } = event; // 获取鼠标相对于Canvas的偏移量this.context.lineTo(offsetX, offsetY); // 绘制路径this.context.stroke(); // 绘制路径的边框},// 当鼠标松开时触发，用于停止绘制签名stopDrawing() {this.isDrawing = false; // 停止绘制},// 清除clearCanvas() {this.context.clearRect(0,0,this.$refs.canvas.width,this.$refs.canvas.height); // 清除Canvas上的内容},// 保存saveSignature() {const dataURL = this.$refs.canvas.toDataURL(); // 获取签名图片的Base64编码// 在这里可以将dataURL发送到服务器保存，或者进行其他操作console.log(dataURL); // 输出签名的Base64编码到控制台},},
};
</script>
<style scoped>
canvas {border: 1px solid red;
}
</style>

实现效果
在这里插入图片描述

二、vue-esign 插件

vue-esign 是一个基于 vue.js 框架的电子签名组件库，它提供了一套现成的 UI 组件，包括签名面板、工具栏等，可以方便地在 vue.js 应用中实现电子签名功能。

2.1 安装

npm install vue-esign --save

2.2 引用

  • 全局引用

    import vueEsign from 'vue-esign'
Vue.use(vueEsign)

  • 局部引用

    import vueEsign from 'vue-esign'
components: { vueEsign }

2.3 使用

<template><div class="box"><vue-esign ref="esign" :width="300" :height="150" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor":bgColor.sync="bgColor" /><div><button @click="handleReset">清空画板</button><button @click="handleGenerate">生成图片</button></div><img :src="resultImg" alt=""></div>
</template><script>
import vueEsign from "vue-esign";
export default {components: { vueEsign },data() {return {lineWidth: 6,lineColor: "#000000",bgColor: "",resultImg: "",isCrop: false,};},mounted() {},methods: {handleReset() {this.$refs.esign.reset();},handleGenerate() {this.$refs.esign.generate({ format: "png", quality: 0.8 }).then((res) => {this.resultImg = res;}).catch((err) => {console.error(err);alert("生成图片失败：" + err.message);});},},
};
</script>
<style scoped>
.box {width: 300px;height: 150px;border: 1px solid red;
}
</style>

实现效果

在这里插入图片描述

此外，vue-esign 插件还支持画笔粗细自定义、画笔颜色自定义等等，感兴趣的同学可以看下面的属性试试。

2.4 常用的属性

属性类型默认值描述
widthNumber800画布宽度，即导出图片的宽度
heightNumber300画布高度，即导出图片的高度
lineWidthNumber4画笔粗细
lineColorString#000000画笔颜色
bgColorString空画布背景色，为空时画布背景透明，支持多种格式 ‘#ccc’，‘#E5A1A1’，‘rgb(229, 161, 161)’，‘rgba(0,0,0,.6)’，‘red’
isCropBooleanfalse是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
isClearBgColorBooleantrue清空画布时(reset)是否同时清空设置的背景色(bgColor)
formatStringimage/png生成图片格式 image/jpeg(jpg格式下生成的图片透明背景会变黑色请慎用或指定背景色)、 image/webp
qualityNumber1生成图片质量；在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

三、vue-signature-pad 插件

vue-signature-pad 同样是一个基于 vue.js 框架的电子签名组件库，它提供了一个可定制的签名面板，可以方便地在 vue.js 应用中实现电子签名功能。

注意： 如果仍在使用 vue2 ，请安装 2.0.5 版本，对于 vue3，可以安装最新的发布版本。

3.1 安装

npm i vue-signature-pad@2.0.5

3.2 全局引用

import VueSignature from "vue-signature-pad";
Vue.use(VueSignature);

3.3 使用

<template><div class="box"><VueSignaturePad width="300px" height="150px" ref="signaturePad" /><div><button @click="save">保存</button><button @click="undo">撤销</button></div></div>
</template><script>
export default {data() {return {};},mounted() {},methods: {// 撤销操作undo() {this.$refs.signaturePad.undoSignature();},// 保存操作save() {const { isEmpty, data } = this.$refs.signaturePad.saveSignature();console.log(data);},},
};
</script>
<style scoped>
.box {width: 300px;height: 150px;border: 1px solid red;
}
</style>

实现效果

在这里插入图片描述

3.4 常用的属性

属性类型默认值描述
widthString100%画布宽度
heightString100%画布高度
optionsObject{}设置画笔的选项，包括线条颜色、宽度、透明度等
imagesArray[]设置背景图片。可以是 [‘1.png’, ‘2.png’] 或者 [{ src: ‘1.png’, x: 0, y: 0 }, { src: ‘2.png’, x: 0, y: 10 }]
customStyleObject{}设置画布的自定义样式。可以是一个CSS样式对象
scaleToDevicePixelRatioBooleantrue设置是否将画布缩放到设备像素比

3.5 常用的方法

方法参数描述
saveSignature(type, encoderOptions)(String, Number)保存当前的签名，并返回一个包含签名是否为空和签名数据的对象
undoSignature()-撤销上一步的签名操作
clearSignature()-清除当前的签名
mergeImageAndSignature(signature)Object 或者 String将指定的背景图片与当前的签名合并
addImages(images)Array添加多个背景图片
lockSignaturePad()-锁定签名画布，禁止用户进行签名操作
openSignaturePad()-解锁签名画布，允许用户进行签名操作
getPropImagesAndCacheImages()-获取图像的信息
clearCacheImages()-清除缓存的图片
fromDataURL(data, options, callback)(String, Object, Callback)从指定的DataURL加载签名数据
fromData(data)String从指定的数据加载签名数据
toData()-获取当前的签名数据
isEmpty()-检查当前的签名是否为空

完整功能代码

<template><div class="box"><!-- VueSignaturePad 组件 --><VueSignaturePad :width="width" :height="height" :options="options" :images="images" :customStyle="customStyle":scaleToDevicePixelRatio="scaleToDevicePixelRatio" ref="signaturePad" /><div><!-- 操作按钮 --><button @click="save">保存</button><button @click="undo">撤销</button><button @click="clear">清除</button><button @click="mergeImage">合并图片</button><button @click="addImages">添加图片</button><button @click="lock">锁定</button><button @click="unlock">解锁</button><button @click="getData">获取数据</button><button @click="isEmpty">是否为空</button><button @click="getPropImagesAndCacheImages">获取并缓存背景图片</button><button @click="clearCacheImages">清除缓存的背景图片</button><button @click="loadSignatureFromDataURL">从 Data URL 加载签名</button><button @click="loadSignatureFromData">从 JSON 数据加载签名</button></div></div>
</template><script>
export default {data() {return {width: "1000px",height: "500px",options: {minWidth: 2, // 画笔最小宽度maxWidth: 5, // 画笔最大宽度throttle: 16, // 画笔移动事件的时间间隔，单位为毫秒minDistance: 5, // 画笔移动的最小距离，单位为像素backgroundColor: "rgba(255, 255, 255, 0)", // 画布背景颜色penColor: "red", // 画笔颜色velocityFilterWeight: 0.7, // 画笔速度过滤器的权重onBegin: () => {}, // 开始签名时的回调函数onEnd: () => {}, // 结束签名时的回调函数},images: [],customStyle: {signatureCanvas: {border: "1px solid #ccc", // 画布边框borderRadius: "5px", // 画布圆角},signaturePad: {boxShadow: "0 0 5px rgba(0, 0, 0, 0.1)", // 画笔阴影},},scaleToDevicePixelRatio: true,};},methods: {// 保存签名save() {const { isEmpty, data } = this.$refs.signaturePad.saveSignature();console.log("签名是否为空:", isEmpty);console.log("签名数据:", data);},// 撤销签名undo() {this.$refs.signaturePad.undoSignature();},// 清除签名clear() {this.$refs.signaturePad.clearSignature();},// 合并图片和签名mergeImage() {const image = "image.jpg"; // 替换为你的背景图片路径this.$refs.signaturePad.mergeImageAndSignature(image);},// 添加图片addImages() {const images = ["image.jpg", "image.jpg"]; // 替换为你的背景图片路径数组this.$refs.signaturePad.addImages(images);},// 锁定签名画布lock() {this.$refs.signaturePad.lockSignaturePad();},// 解锁签名画布unlock() {this.$refs.signaturePad.openSignaturePad();},// 获取签名数据getData() {const data = this.$refs.signaturePad.toData();console.log("获取签名数据:", data);},// 检查签名是否为空isEmpty() {const empty = this.$refs.signaturePad.isEmpty();if (!empty) {alert("画布不为空！");} else {alert("画布为空！");}},// 获取并缓存背景图片getPropImagesAndCacheImages() {const images = ["image1.jpg", "image2.jpg"]; // 替换为你的背景图片路径数组this.$refs.signaturePad.getPropImagesAndCacheImages(images);},// 清除缓存的背景图片clearCacheImages() {this.$refs.signaturePad.clearCacheImages();},// 从 Data URL 加载签名loadSignatureFromDataURL() {const dataURL = "data:image/png;base64,iVBORw0KG..."; // 替换为你的 Data URLthis.$refs.signaturePad.fromDataURL(dataURL);},// 从 JSON 数据加载签名loadSignatureFromData() {const signatureData = {width: 500,height: 500,data: [{color: "#000",points: [{ x: 100, y: 100 },{ x: 200, y: 200 },{ x: 300, y: 300 },],},{color: "#f00",points: [{ x: 400, y: 400 },{ x: 450, y: 450 },{ x: 500, y: 500 },],},], //替换你的数据};const pointGroups = signatureData.data;this.$refs.signaturePad.fromData(pointGroups);},},
};
</script>
<style scoped>
.box {width: 1000px;height: 500px;border: 1px solid red;
}
</style>

四、vue-esign 和 vue-signature-pad 的区别？

4.1 共同点

  • 兼容 PC 和 移动端；
  • 同时支持 vue2 和 vue3;
  • 画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标）；
  • 自定义画布尺寸，画笔粗细、颜色，画布背景色。

4.2 不同点

  • vue-signature-pad 带笔压功能，可以根据笔的速度和方向来调整线条的粗细，不是固定粗细的，vue-esign 不支持此功能；
  • vue-signature-pad 的 vue2 和 vue3 依赖安装版本不同；vue-esign 都版本向下兼容，不需要区分 vue2 和 vue3;
  • vue-signature-pad 支持单步撤回，vue-esign 不支持此功能。

笔压对比效果

左边是 vue-signature-pad 插件，可以看到画笔线条不是固定粗细的，右边是 vue-esign 插件，线条是固定的粗细。
在这里插入图片描述

相关推荐

⭐ 浅谈 JSON 对象和 FormData 相互转换，打通前端与后端的通信血脉

这篇关于vue实践：构建高效的电子签名功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/660452。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
基于MySQL Binlog的Elasticsearch数据同步实践

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展，我们的业务数据越来越多，单纯使用 MySQL 已经不能满足我们的数据查询需求，例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后，随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步，我们目前的解决方案是建立数据中间表。把需要检索的业务数据，统一放到一张M
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
高效+灵活，万博智云全球发布AWS无代理跨云容灾方案！

高效+灵活，万博智云全球发布AWS无代理跨云容灾方案！

摘要 近日，万博智云推出了基于AWS的无代理跨云容灾解决方案，并与拉丁美洲，中东，亚洲的合作伙伴面向全球开展了联合发布。这一方案以AWS应用环境为基础，将HyperBDR平台的高效、灵活和成本效益优势与无代理功能相结合，为全球企业带来实现了更便捷、经济的数据保护。 一、全球联合发布 9月2日，万博智云CEO Michael Wong在线上平台发布AWS无代理跨云容灾解决方案的阐述视频，介绍了
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
高效录音转文字：2024年四大工具精选！

高效录音转文字：2024年四大工具精选！

在快节奏的工作生活中，能够快速将录音转换成文字是一项非常实用的能力。特别是在需要记录会议纪要、讲座内容或者是采访素材的时候，一款优秀的在线录音转文字工具能派上大用场。以下推荐几个好用的录音转文字工具！ 365在线转文字 直达链接：https://www.pdf365.cn/ 365在线转文字是一款提供在线录音转文字服务的工具，它以其高效、便捷的特点受到用户的青睐。用户无需下载安装任何软件，只
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2