前端如何实现签名功能

news/2024/12/12 19:57:42/

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端和移动端的签名需求。

http://www.ppmy.cn/news/1554583.html

相关文章

【SH】微信小程序调用EasyDL零门槛AI开发平台的图像分类研发笔记

【SH】微信小程序调用EasyDL零门槛AI开发平台的图像分类研发笔记

文章目录 微信小程序字符串字符串模板字符串拼接 上传图片编写JS代码编写wxml代码编写wxss代码 GET请求测试编写测试代码域名不合法问题 GET和POST请求测试编写JS代码编写wxml代码编写wxss代码 效果展示 微信小程序字符串 字符串模板 这是ES6引入的特性&#xff0c;允许你通过…
阅读更多...
hibernate 配置 二级 缓存

hibernate 配置 二级 缓存

一级缓存 是默认的 是session 级别的缓存 二级缓存是 可选的 是sessionfactory的缓存 hibernate.cfg.xml 加入如下配置 <!-- 开启二级缓存--> <property name"hibernate.cache.use_second_level_cache">true</property> <!-- 使用ecache 作…
阅读更多...
http 和 https 的区别？

http 和 https 的区别？

HTTP (HyperText Transfer Protocol) 和 HTTPS (HyperText Transfer Protocol Secure) 是两种用于在 Web 浏览器和网站服务器之间传输网页的协议&#xff0c;它们的主要区别在于安全性。以下是 HTTP 和 HTTPS 的一些关键区别&#xff1a; 安全性&#xff1a; HTTP&#xff1a;H…
阅读更多...
Windows使用VirtualBox安装macOS

Windows使用VirtualBox安装macOS

您的赞&#xff0c;是Ikun练习时长两年半 和 In Windows 11更新的动力 之前我在这里写了一篇文章&#xff0c;名字是“[教程]用VirtualBox安装MacOS虚拟机”。我感觉这篇文章没有写详细&#xff0c;所以重新写了一篇。 镜像下载 这个吗… [此资源非常稀有&#xff0c;下载此文…
阅读更多...
【数据结构】计数排序的原理及实现

【数据结构】计数排序的原理及实现

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在准备26考研 ✈️专栏&#xff1a;数据结构 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章…
阅读更多...
Android APP自学笔记

Android APP自学笔记

摘抄于大学期间记录在QQ空间的一篇自学笔记&#xff0c;当前清理空间&#xff0c;本来想直接删除掉的&#xff0c;但是感觉有些舍不得&#xff0c;因此先搬移过来。 Android导入已有外部数据库 2015.06.26在QQ空间记录&#xff1a;在Android中不能直接打开res aw目录中的数据…
阅读更多...
【MIT-OS6.S081作业1.3】Lab1-utilities primes

【MIT-OS6.S081作业1.3】Lab1-utilities primes

本文记录MIT-OS6.S081 Lab1 utilities 的primes函数的实现过程 文章目录 1. 作业要求primes (moderate)/(hard) 2. 实现过程2.1 代码实现 1. 作业要求 primes (moderate)/(hard) Write a concurrent version of prime sieve using pipes. This idea is due to Doug McIlroy, in…
阅读更多...
蓝桥杯我来了

蓝桥杯我来了

最近蓝桥杯报名快要截止了&#xff0c;我们学校开始收费了&#xff0c;我们学校没有校赛&#xff0c;一旦报名缴费就是省赛&#xff0c;虽然一早就在官网上报名了&#xff0c;但是一直在纠结&#xff0c;和家人沟通&#xff0c;和朋友交流&#xff0c;其实只是想寻求外界的支持…
阅读更多...
最新文章

Copyright @ 2022~2023