邹城建网站,中国新闻社山西分社,旅游建设网站,教育网站官网入口1.JS实现
前端实现签名功能#xff0c;通常是通过在页面上创建一个可绘制的区域#xff0c;用户可以用鼠标或触摸设备进行签名。这个区域通常是一个canvas元素#xff0c;结合JavaScript来处理绘制和保存签名。下面是一个简单的实现步骤#xff1a;
1.1. 创建HTM…1.JS实现
前端实现签名功能通常是通过在页面上创建一个可绘制的区域用户可以用鼠标或触摸设备进行签名。这个区域通常是一个canvas元素结合JavaScript来处理绘制和保存签名。下面是一个简单的实现步骤
1.1. 创建HTML页面
首先需要在页面中添加一个canvas元素用于用户签名。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleSignature Pad/titlestylecanvas {border: 1px solid #000;width: 100%;max-width: 600px;height: 300px;}button {margin-top: 10px;}/style
/head
bodyh1Signature Pad/h1canvas idsignatureCanvas/canvasbrbutton idclearButtonClear/buttonbutton idsaveButtonSave/buttonimg idsavedImage altSaved Signature styledisplay:none; /script srcsignature.js/script
/body
/html1.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组件来处理签名功能。
templatedivh2Signature Pad/h2canvas refsignatureCanvas classsignature-canvas mousedownstartDrawing mousemovedraw mouseupstopDrawing mouseoutstopDrawingtouchstartstartDrawing touchmovedraw touchendstopDrawing/canvasbutton clickclearCanvasClear/buttonbutton clicksaveSignatureSave/buttonimg v-ifsavedImage :srcsavedImage altSignature Image //div
/templatescript
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 };}}
};
/scriptstyle
.signature-canvas {border: 1px solid #000;width: 100%;max-width: 600px;height: 300px;
}
/style2关键点
使用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_pad2创建Vue组件并使用Signature Pad
templatedivh2Signature Pad/h2canvas refsignatureCanvas classsignature-canvas/canvasbutton clickclearCanvasClear/buttonbutton clicksaveSignatureSave/buttonimg v-ifsavedImage :srcsavedImage altSignature Image //div
/templatescript
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.);}}}
};
/scriptstyle
.signature-canvas {border: 1px solid #000;width: 100%;max-width: 600px;height: 300px;
}
/style3Signature Pad库的优势
跨平台支持PC端和移动端。撤销功能你可以调用signaturePad.undo()来实现撤销功能。保存图片提供多种格式如PNG、JPG、SVG来保存签名。性能优异对于高分辨率的签名场景提供了平滑的绘图体验。
推荐的Vue签名组件库
1vue-signature-pad
vue-signature-pad 是一个基于 Signature Pad 的 Vue 封装简化了签名功能的集成和使用。
安装
npm install vue-signature-pad使用
templatedivVueSignaturePad refsignaturePad :optionsoptions /button clickclearSignatureClear/buttonbutton clicksaveSignatureSave/buttonimg v-ifsavedImage :srcsavedImage altSignature Image //div
/templatescript
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.);}}}
};
/script2vue-canvas-signature
vue-canvas-signature 是另一个常用的签名组件支持多种自定义选项。
安装
npm install vue-canvas-signature使用
templatedivvue-canvas-signature refcanvasSignature /button clickclearSignatureClear/buttonbutton clicksaveSignatureSave/buttonimg v-ifsavedImage :srcsavedImage altSignature Image //div
/templatescript
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端和移动端的签名需求。
