Signature Pad 基础用法


安装与引入

首先需要安装

1. signature_pad

复制代码

库：

1. npm install signature_pad

复制代码

然后在Vue组件中引入：

1. import SignaturePad from "signature_pad";

复制代码

基本实现

1. <template>
   
2.   <div>
   
3.     <div class="signature-pad-container">
   
4.       <canvas ref="signaturePad"></canvas>
   
5.     </div>
   
6.     <button @click="clear">清除</button>
   
7.     <button @click="save">保存</button>
   
8.   </div>
   
9. </template>
   
10. 
    
11. <script setup>
    
12. import { ref, onMounted } from 'vue'
    
13. import SignaturePad from 'signature_pad'
    
14. 
    
15. const signaturePad = ref(null)
    
16. let signaturePadInstance = null
    
17. 
    
18. onMounted(() => {
    
19.   signaturePadInstance = new SignaturePad(signaturePad.value)
    
20. })
    
21. 
    
22. const clear = () => {
    
23.   signaturePadInstance.clear()
    
24. }
    
25. 
    
26. const save = () => {
    
27.   const dataURL = signaturePadInstance.toDataURL()
    
28.   console.log(dataURL) // 输出签名图片的Base64编码
    
29. }
    
30. </script>

复制代码

解决签名位置偏差问题


问题根源分析

签名位置偏差通常由以下原因导致：

• Canvas尺寸与显示尺寸不匹配：
  1. Canvas

  复制代码
  有
  1. width

  复制代码
  /
  1. height

  复制代码
  属性和CSS的
  1. width

  复制代码
  /
  1. height

  复制代码
  样式，两者需要一致。
  
• 设备像素比(DPR)问题：在高分辨率屏幕上，
  1. CSS

  复制代码
  像素与设备像素不一致。
  
• 坐标系未校正：未考虑设备像素比导致的事件坐标转换错误。
  

解决方案

1. 获取设备像素比(DPR)： 设备像素比(Device Pixel Ratio)表示一个CSS像素对应多少个设备物理像素。

1. const dpr = window.devicePixelRatio || 1;

复制代码

2. 正确设置Canvas尺寸： 确保了 Canvas 内部绘制缓冲区的大小与屏幕显示大小成正确比例。

1. const rect = canvas.getBoundingClientRect();
   
2. canvas.width = rect.width * dpr;
   
3. canvas.height = rect.height * dpr;
   
4. canvas.style.width = `${rect.width}px`;
   
5. canvas.style.height = `${rect.height}px`;

复制代码

3. 初始化签名板并调整笔迹粗细： 根据 DPI 调整笔迹粗细，确保在高分辨率设备上线条不会显得过细。

1. const baseWidth = 2;
   
2. signaturePadInstance = new SignaturePad(canvas, {
   
3.   minWidth: baseWidth * dpr,
   
4.   maxWidth: baseWidth * dpr * 2,
   
5.   // 其他配置...
   
6. });

复制代码

4. 坐标系校正：（关键） 使事件坐标与实际绘制位置匹配。

1. const ctx = canvas.getContext("2d");
   
2. ctx.scale(dpr, dpr);

复制代码

5. 触摸设备支持： 禁用触摸设备的默认滚动行为，确保签名体验流畅。

1. canvas.addEventListener("touchstart", preventScroll, { passive: false });
   
2. canvas.addEventListener("touchmove", preventScroll, { passive: false });
   
3. 
   
4. const preventScroll = (e) => {
   
5.   e.preventDefault();
   
6. };

复制代码

6. 响应式处理： 监听窗口大小变化并重新初始化签名板，确保在响应式布局中正常工作。

1. const handleResize = () => {
   
2.   if (signaturePadInstance) {
   
3.     initSignaturePad(); // 重新初始化以适应新尺寸
   
4.   }
   
5. };
   
6. 
   
7. onMounted(() => {
   
8.   window.addEventListener("resize", handleResize);
   
9. });
   
10. 
    
11. onUnmounted(() => {
    
12.   window.removeEventListener("resize", handleResize);
    
13. });

复制代码

代码

1. const initSignaturePad = () => {
   
2.   nextTick(() => {
   
3.     const canvas = signaturePad.value;
   
4.     if (canvas) {
   
5.       // 1. 获取设备像素比
   
6.       const dpr = window.devicePixelRatio || 1;
   
7.       
   
8.       // 2. 获取Canvas的实际显示尺寸
   
9.       const rect = canvas.getBoundingClientRect();
   
10.       
    
11.       // 3. 设置Canvas的实际绘制尺寸(考虑DPI)
    
12.       canvas.width = rect.width * dpr;
    
13.       canvas.height = rect.height * dpr;
    
14.       
    
15.       // 4. 设置Canvas的CSS显示尺寸(保持与容器一致)
    
16.       canvas.style.width = `${rect.width}px`;
    
17.       canvas.style.height = `${rect.height}px`;
    
18.       
    
19.       // 5. 根据DPI调整笔迹粗细
    
20.       const baseWidth = 2;
    
21.       
    
22.       // 6. 初始化签名板
    
23.       signaturePadInstance = new SignaturePad(canvas, {
    
24.         backgroundColor: "rgb(255, 255, 255)",
    
25.         penColor: "rgb(0, 0, 0)",
    
26.         minWidth: baseWidth * dpr,
    
27.         maxWidth: baseWidth * dpr * 2,
    
28.         throttle: 16 // 节流控制提高性能
    
29.       });
    
30.       
    
31.       // 7. 调整坐标系以匹配高DPI
    
32.       const ctx = canvas.getContext("2d");
    
33.       ctx.scale(dpr, dpr);
    
34.       
    
35.       // 8. 添加触摸设备支持
    
36.       canvas.addEventListener("touchstart", preventScroll, { passive: false });
    
37.       canvas.addEventListener("touchmove", preventScroll, { passive: false });
    
38.     }
    
39.   });
    
40. };

复制代码

效果

完整代码

1. <template>
   
2.   <div class="signature-container">
   
3.     <h2>电子签名</h2>
   
4.     <div class="signature-pad-container">
   
5.       <canvas ref="signaturePad" class="signature-pad"></canvas>
   
6.     </div>
   
7.     <div class="signature-actions">
   
8.       <el-button @click="clearSignature">清除</el-button>
   
9.       <el-button type="primary" @click="saveSignature">保存签名</el-button>
   
10.     </div>
    
11.     <div v-if="signatureUrl" class="signature-preview">
    
12.       <el-image v-if="signatureUrl" :src="signatureUrl"></el-image>
    
13.     </div>
    
14.   </div>
    
15. </template>

复制代码

1. <script setup>
   
2. import { ref, onMounted, onUnmounted, nextTick } from "vue";
   
3. import SignaturePad from "signature_pad";
   
4. 
   
5. const signaturePad = ref(null);
   
6. let signaturePadInstance = null;
   
7. const signatureUrl = ref("");
   
8. 
   
9. const initSignaturePad = () => {
   
10.   nextTick(() => {
    
11.     const canvas = signaturePad.value;
    
12.     if (!canvas) return;
    
13. 
    
14.     const dpr = window.devicePixelRatio || 1;
    
15.     const rect = canvas.getBoundingClientRect();
    
16.    
    
17.     canvas.width = rect.width * dpr;
    
18.     canvas.height = rect.height * dpr;
    
19.     canvas.style.width = `${rect.width}px`;
    
20.     canvas.style.height = `${rect.height}px`;
    
21.    
    
22.     const baseWidth = 2;
    
23.    
    
24.     signaturePadInstance = new SignaturePad(canvas, {
    
25.       backgroundColor: "rgb(255, 255, 255)",
    
26.       penColor: "rgb(0, 0, 0)",
    
27.       minWidth: baseWidth * dpr,
    
28.       maxWidth: baseWidth * dpr * 2,
    
29.       throttle: 16,
    
30.       velocityFilterWeight: 0.7,
    
31.       minDistance: 5
    
32.     });
    
33.    
    
34.     const ctx = canvas.getContext("2d");
    
35.     ctx.scale(dpr, dpr);
    
36.    
    
37.     // 触摸支持
    
38.     canvas.addEventListener("touchstart", preventScroll, { passive: false });
    
39.     canvas.addEventListener("touchmove", preventScroll, { passive: false });
    
40.   });
    
41. };
    
42. 
    
43. const preventScroll = (e) => {
    
44.   e.preventDefault();
    
45. };
    
46. 
    
47. const clearSignature = () => {
    
48.   if (signaturePadInstance) {
    
49.     signaturePadInstance.clear();
    
50.     signatureUrl.value = "";
    
51.   }
    
52. };
    
53. 
    
54. const saveSignature = () => {
    
55.   if (!signaturePadInstance || signaturePadInstance.isEmpty()) {
    
56.     ElMessage.warning("请先签名");
    
57.     return;
    
58.   }
    
59.   
    
60.   // 保存高质量PNG
    
61.   signatureUrl.value = signaturePadInstance.toDataURL('image/png', 1.0);
    
62.   ElMessage.success("签名保存成功");
    
63. };
    
64. 
    
65. const handleResize = () => {
    
66.   if (signaturePadInstance) {
    
67.     initSignaturePad();
    
68.   }
    
69. };
    
70. 
    
71. onMounted(() => {
    
72.   initSignaturePad();
    
73.   window.addEventListener("resize", handleResize);
    
74. });
    
75. 
    
76. onUnmounted(() => {
    
77.   window.removeEventListener("resize", handleResize);
    
78. });
    
79. </script>

复制代码

1. <style scoped>
   
2. .signature-container {
   
3.   max-width: 800px;
   
4.   margin: 0 auto;
   
5.   padding: 20px;
   
6. }
   
7. 
   
8. .signature-pad-container {
   
9.   position: relative;
   
10.   width: 100%;
    
11.   height: 400px;
    
12.   border: 1px solid #dcdfe6;
    
13.   border-radius: 4px;
    
14.   margin: 20px 0;
    
15. }
    
16. 
    
17. .signature-pad {
    
18.   position: absolute;
    
19.   top: 0;
    
20.   left: 0;
    
21.   width: 100%;
    
22.   height: 100%;
    
23.   touch-action: none;
    
24. }
    
25. 
    
26. .signature-actions {
    
27.   display: flex;
    
28.   justify-content: flex-end;
    
29.   gap: 10px;
    
30.   margin-bottom: 20px;
    
31. }
    
32. 
    
33. .signature-preview {
    
34.   margin-top: 20px;
    
35.   text-align: center;
    
36. }
    
37. </style>

复制代码

以上就是Vue3使用Signature Pad实现电子签名功能的详细内容，更多关于Vue3 Signature Pad电子签名的资料请关注脚本之家其它相关文章！

来源：https://www.jb51.net/javascript/339460qw4.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！