uniApp利用canvas制作署名板

插件市场大佬封装好的 组件 可以直接拿已往

2. <template>
3.   <view
4.     class="whole canvas-autograph flexc"
5.     @touchmove.prevent.stop
6.     @wheel.prevent.stop
7.     v-show="modelValue"
8.   >
9.     <canvas
10.       class="scroll-view"
11.       id="mycanvas"
12.       canvas-id="mycanvas"
13.       @touchstart="touchstart"
14.       @touchmove="touchmove"
15.       @touchend="touchend"
16.     />
17.     <view class="fun-box">
18.       <view
19.         class="fun-box-btn clear flex"
20.         @click="clear"
21.       >
22.         <text>清空</text>
23.       </view>
24.       <view
25.         class="fun-box-btn confirm flex"
26.         @click="confirm"
27.       >
28.         <text>确认</text>
29.       </view>
30.       <view
31.         class="fun-box-btn cancel flex"
32.         @click="cancel"
33.       >
34.         <text>取消</text>
35.       </view>
36.     </view>
37.   </view>
38. </template>
40. <script setup>
41. /*
42.                 使用如下
43.                 <canvas-autograph v-model="isCanvas" @complete="complete"/>
44.                
45.                 // 打开、关闭
46.                 let isCanvas = ref(false)
47.                 // 确认事件
48.                 const complete = e=>{
49.                         console.log(e)
50.                 }
51.        
52.         */
53. import { ref, reactive, watch, getCurrentInstance } from 'vue'
54. const hasSignature = ref(false) // 新增：记录是否签名
55. const emits = defineEmits(['update:modelValue', 'complete'])
57. const props = defineProps({
58.   modelValue: Boolean
59. })
60. const _this = getCurrentInstance()
61. watch(
62.   () => props.modelValue,
63.   (e) => {
64.     // 这里可进行 tabbar 的 显示、隐藏  不要也可以
65.     // 自己写
66.   },
67.   {
68.     immediate: true // 是否默认执行一次  默认为false
69.   }
70. )
72. let points = reactive([]) //路径点集合
74. let canvaCtx = reactive(uni.createCanvasContext('mycanvas', _this)) //创建绘图对象
75. //设置画笔样式
76. canvaCtx.lineWidth = 4
77. canvaCtx.lineCap = 'round'
78. canvaCtx.lineJoin = 'round'
80. //触摸开始，获取到起点
81. const touchstart = (e) => {
82.   hasSignature.value = true // 有触摸操作则认为有签名
83.   let startX = e.changedTouches[0].x
84.   let startY = e.changedTouches[0].y
85.   let startPoint = { X: startX, Y: startY }
86.   points.push(startPoint)
87.   //每次触摸开始，开启新的路径
88.   canvaCtx.beginPath()
89. }
90. //触摸移动，获取到路径点
91. const touchmove = (e) => {
92.   let moveX = e.changedTouches[0].x
93.   let moveY = e.changedTouches[0].y
94.   let movePoint = { X: moveX, Y: moveY }
95.   points.push(movePoint) //存点
96.   let len = points.length
97.   if (len >= 2) {
98.     draw()
99.   }
100. }
101. //绘制路径
102. const draw = () => {
103.   let point1 = points[0]
104.   let point2 = points[1]
105.   points.shift()
106.   canvaCtx.moveTo(point1.X, point1.Y)
107.   canvaCtx.lineTo(point2.X, point2.Y)
108.   canvaCtx.stroke()
109.   canvaCtx.draw(true)
110. }
111. // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
112. const touchend = (e) => {
113.   points = []
114. }
115. // 清空画布
116. const clear = () => {
117.   hasSignature.value = false // 清空时重置签名标志
118.   return uni
119.     .getSystemInfo()
120.     .then((res) => {
121.       canvaCtx.clearRect(0, 0, res.windowWidth, res.windowHeight)
122.       canvaCtx.draw(true)
123.       return res
124.     })
125.     .catch((err) => {
126.       // console.log(err);
127.     })
128. }
129. // 确认
130. const confirm = () => {
131.   if (!hasSignature.value) {
132.     // 如果没有签名，提示用户
133.     uni.showToast({
134.       title: '请先签名',
135.       icon: 'none',
136.       duration: 2000
137.     })
138.     return
139.   }
141.   uni.canvasToTempFilePath({ canvasId: 'mycanvas' }, _this, _this.parent).then((res) => {
142.     console.log(res.tempFilePath)
143.     emits('complete', res.tempFilePath)
144.     cancel()
145.   })
146. }
147. // 取消
148. const cancel = () => {
149.   clear().then((res) => emits('update:modelValue', false))
150. }
151. </script>
153. <style scoped lang="scss">
154. .canvas-autograph {
155.   position: fixed;
156.   z-index: 99999;
157.   width: 100vw;
158.   height: 100vh;
159.   top: 0;
160.   left: 0;
161.   .scroll-view {
162.     width: 100%;
163.     height: 100%;
164.     background-color: #ffffff;
165.   }
166.   .fun-box {
167.     position: absolute;
168.     right: 0;
169.     bottom: 10vh;
170.     height: auto;
171.     display: flex;
172.     flex-direction: column;
173.     .fun-box-btn {
174.       width: 100rpx;
175.       height: 160rpx;
176.       color: #ffffff;
177.       border-radius: 20rpx;
178.       border: 1rpx solid #c0c0c0;
179.       display: flex;
180.       align-items: center;
181.       justify-content: center;
182.       margin-bottom: 20rpx;
183.       margin-right: 10rpx;
184.       text {
185.         transform: rotate(90deg);
186.       }
187.     }
188.     .clear {
189.       color: #909399;
190.       background-color: #f4f4f5;
191.     }
192.     .confirm {
193.       background-color: #409eff;
194.     }
195.     .cancel {
196.       background-color: #f67d7d;
197.     }
198.   }
199. }
200. </style>

复制代码

子组件利用

2.     <miliu-autograph
3.       v-model="isCanvas"
4.       @complete="complete"
5.     ></miliu-autograph>
7. let isCanvas = ref(false)
10. function toCanvas() {
11.   isCanvas.value = true
12. }
14. // 确认事件
15. const complete = (e) => {
16.   console.log(e) // 返回本地生成的base图片路径
17.   // 上传签名图片
18.   uni.getImageInfo({
19.     src: e,
20.     success: function (res) {
21.       // uni.uploadFile({
22.       //   url: baseUrl + '/file/upload', //后端接口地址
23.       //   name: 'file', //必填 , 此为类型名称
24.       //   filePath: res.path, //电子签名图片路径
25.       //   header: {
26.       //     Authorization: 'Bearer ' + that.token
27.       //   },
28.       //   success: (res) => {
29.       //     console.log(res, '签名信息 ------ res');
30.       //     //上传成功后逻辑
31.       //     uni.showToast({
32.       //       title: '签名成功!'
33.       //     });
34.       //   },
35.       //   fail: (err) => {
36.       //     console.log(err);
37.       //     uni.showToast({
38.       //       title: '签名失败!'
39.       //     });
40.       //   }
41.       // });
42.     }
43.   })
44. }

复制代码

再具体的我就不形貌了 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金