手写签名功能（vue3）

手写签名功能（vue3）

效果

显示效果

签名版效果

代码

1. 代码引入
   写成子组件形式，直接引入即可

<signature-features />
1

2. 代码结构
   
   signatureFeatures：签名的显示效果
   vueEsign：画板
   xnSignName：打开签名后的modal框
3. 文件代码
   signatureFeatures：

<template>
	<div>
		<div class="mb-2" v-if="userInfo.signature">
			<a-image :src="userInfo.signature" style="height: 120px; border: 1px solid rgb(236 236 236)" />
		</div>
		<a-button @click="XnSignNameRef.show()">打开签名板</a-button>
		<xn-sign-name ref="XnSignNameRef" :image="userInfo.signature" @successful="signSuccess" />
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import tool from '@/utils/tool'
	import userCenterApi from '@/api/sys/userCenterApi'
	import store from '@/store'
	import XnSignName from '@/views/sys/user/userTab/signatureFeatures/xnSignName.vue'
	const userInfo = ref(tool.data.get('USER_INFO'))
	const XnSignNameRef = ref()
	// 签名板组件回调
	const signSuccess = (value) => {
		const param = {
			signature: value
		}
		userCenterApi.userUpdateSignature(param).then(() => {
			userInfo.value.signature = value
			// 更新缓存
			tool.data.set('USER_INFO', userInfo.value)
			store.commit('SET_userInfo', userInfo.value)
		})
	}
</script>

<style scoped></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

xnSignName：

<template>
	<a-modal ref="signModel" v-model:visible="visible" :width="600" title="电子签名" @cancel="handleClear" @ok="handleOk">
		<a-row :gutter="5">
			<a-col :span="15">
				<div style="border: 1px solid rgb(236 236 236)">
					<vue-esign
						ref="esign"
						v-model:bgColor="bgColor"
						:width="800"
						:height="400"
						:is-crop="isCrop"
						:line-width="lineWidth"
						:line-color="lineColor"
					/>
				</div>
			</a-col>
			<a-col :span="9">
				<div style="height: 90px; width: auto">
					<img :src="resultImg" style="height: 90px; width: 100%; border: 1px solid rgb(236 236 236)" />
				</div>
			</a-col>
		</a-row>
		<div style="margin-top: 10px">
			<a-space>
				<a-form>
					<a-row :gutter="16">
						<a-col :span="12">
							<a-form-item label="画笔粗细：">
								<a-input-number v-model:value="lineWidth" :min="1" :max="20" />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item>
								<div style="padding-right: 50px">是否裁剪：<a-checkbox v-model:checked="isCrop"></a-checkbox></div>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
				<a-button type="primary" @click="handleGenerate">预览</a-button>
				<a-button @click="handleReset">清屏</a-button>
			</a-space>
		</div>
	</a-modal>
</template>

<script setup>
	import { message } from 'ant-design-vue'
	import VueEsign from '@/views/sys/user/userTab/signatureFeatures/vueEsign.vue'
	const signModel = ref(false)
	const visible = ref(false)
	const esign = ref(false)
	const resultImg = ref('')
	const isCrop = ref(false)
	const lineWidth = ref(6)
	const lineColor = ref('#000000')
	const bgColor = ref('')
	const props = defineProps(['image'])
	// eslint-disable-next-line vue/no-setup-props-destructure
	resultImg.value = props.image
	const emit = defineEmits({ successful: null })
	const show = () => {
		visible.value = true
	}
	const handleReset = () => {
		esign.value.reset()
		resultImg.value = ''
	}
	const handleGenerate = () => {
		esign.value
			.generate()
			.then((res) => {
				resultImg.value = res
			})
			.catch(() => {
				message.warning('无任何签字')
			})
	}
	const handleClear = () => {
		visible.value = false
	}
	const handleOk = () => {
		esign.value
			.generate()
			.then((res) => {
				emit('successful', res)
				handleClear()
			})
			.catch(() => {
				message.warning('无任何签字')
			})
	}
	defineExpose({
		show
	})
</script>

<style scoped>
	.ant-form-item {
		margin-bottom: 0px !important;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

vueEsign：

<!--
本插件来源于：https://github.com/JaimeCheng/vue-esign#readme
因为集成进来跟我的Vue版本不一致，打包出问题，所以集成源码方式，感谢作者的源码
-->
<template>
	<canvas
		ref="canvas"
		@mousedown="mouseDown"
		@mousemove="mouseMove"
		@mouseup="mouseUp"
		@touchstart="touchStart"
		@touchmove="touchMove"
		@touchend="touchEnd"
	></canvas>
</template>

<script>
	export default {
		props: {
			width: {
				type: Number,
				default: 800
			},
			height: {
				type: Number,
				default: 300
			},
			lineWidth: {
				type: Number,
				default: 4
			},
			lineColor: {
				type: String,
				default: '#000000'
			},
			bgColor: {
				type: String,
				default: ''
			},
			isCrop: {
				type: Boolean,
				default: false
			},
			isClearBgColor: {
				type: Boolean,
				default: true
			},
			format: {
				type: String,
				default: 'image/png'
			},
			quality: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				hasDrew: false,
				resultImg: '',
				points: [],
				canvasTxt: null,
				startX: 0,
				startY: 0,
				isDrawing: false,
				sratio: 1
			}
		},
		computed: {
			ratio() {
				return this.height / this.width
			},
			stageInfo() {
				return this.$refs.canvas.getBoundingClientRect()
			},
			myBg() {
				return this.bgColor ? this.bgColor : 'rgba(255, 255, 255, 0)'
			}
		},
		watch: {
			myBg: function (newVal) {
				this.$refs.canvas.style.background = newVal
			}
		},
		beforeMount() {
			window.addEventListener('resize', this.$_resizeHandler)
		},
		// eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle
		beforeDestroy() {
			window.removeEventListener('resize', this.$_resizeHandler)
		},
		mounted() {
			const canvas = this.$refs.canvas
			canvas.height = this.height
			canvas.width = this.width
			canvas.style.background = this.myBg
			this.$_resizeHandler()
			// 在画板以外松开鼠标后冻结画笔
			document.onmouseup = () => {
				this.isDrawing = false
			}
		},
		methods: {
			$_resizeHandler() {
				const canvas = this.$refs.canvas
				canvas.style.width = this.width + 'px'
				const realw = parseFloat(window.getComputedStyle(canvas).width)
				canvas.style.height = this.ratio * realw + 'px'
				this.canvasTxt = canvas.getContext('2d')
				this.canvasTxt.scale(Number(this.sratio), Number(this.sratio))
				this.sratio = realw / this.width
				this.canvasTxt.scale(1 / this.sratio, 1 / this.sratio)
			},
			// pc
			mouseDown(e) {
				e = e || event
				e.preventDefault()
				this.isDrawing = true
				this.hasDrew = true
				let obj = {
					x: e.offsetX,
					y: e.offsetY
				}
				this.drawStart(obj)
			},
			mouseMove(e) {
				e = e || event
				e.preventDefault()
				if (this.isDrawing) {
					let obj = {
						x: e.offsetX,
						y: e.offsetY
					}
					this.drawMove(obj)
				}
			},
			mouseUp(e) {
				e = e || event
				e.preventDefault()
				let obj = {
					x: e.offsetX,
					y: e.offsetY
				}
				this.drawEnd(obj)
				this.isDrawing = false
			},
			// mobile
			touchStart(e) {
				e = e || event
				e.preventDefault()
				this.hasDrew = true
				if (e.touches.length === 1) {
					let obj = {
						x: e.targetTouches[0].clientX - this.$refs.canvas.getBoundingClientRect().left,
						y: e.targetTouches[0].clientY - this.$refs.canvas.getBoundingClientRect().top
					}
					this.drawStart(obj)
				}
			},
			touchMove(e) {
				e = e || event
				e.preventDefault()
				if (e.touches.length === 1) {
					let obj = {
						x: e.targetTouches[0].clientX - this.$refs.canvas.getBoundingClientRect().left,
						y: e.targetTouches[0].clientY - this.$refs.canvas.getBoundingClientRect().top
					}
					this.drawMove(obj)
				}
			},
			touchEnd(e) {
				e = e || event
				e.preventDefault()
				if (e.touches.length === 1) {
					let obj = {
						x: e.targetTouches[0].clientX - this.$refs.canvas.getBoundingClientRect().left,
						y: e.targetTouches[0].clientY - this.$refs.canvas.getBoundingClientRect().top
					}
					this.drawEnd(obj)
				}
			},
			// 绘制
			drawStart(obj) {
				this.startX = obj.x
				this.startY = obj.y
				this.canvasTxt.beginPath()
				this.canvasTxt.moveTo(this.startX, this.startY)
				this.canvasTxt.lineTo(obj.x, obj.y)
				this.canvasTxt.lineCap = 'round'
				this.canvasTxt.lineJoin = 'round'
				this.canvasTxt.lineWidth = this.lineWidth * this.sratio
				this.canvasTxt.stroke()
				this.canvasTxt.closePath()
				this.points.push(obj)
			},
			drawMove(obj) {
				this.canvasTxt.beginPath()
				this.canvasTxt.moveTo(this.startX, this.startY)
				this.canvasTxt.lineTo(obj.x, obj.y)
				this.canvasTxt.strokeStyle = this.lineColor
				this.canvasTxt.lineWidth = this.lineWidth * this.sratio
				this.canvasTxt.lineCap = 'round'
				this.canvasTxt.lineJoin = 'round'
				this.canvasTxt.stroke()
				this.canvasTxt.closePath()
				this.startY = obj.y
				this.startX = obj.x
				this.points.push(obj)
			},
			drawEnd(obj) {
				this.canvasTxt.beginPath()
				this.canvasTxt.moveTo(this.startX, this.startY)
				this.canvasTxt.lineTo(obj.x, obj.y)
				this.canvasTxt.lineCap = 'round'
				this.canvasTxt.lineJoin = 'round'
				this.canvasTxt.stroke()
				this.canvasTxt.closePath()
				this.points.push(obj)
				this.points.push({ x: -1, y: -1 })
			},
			// 操作
			generate(options) {
				let imgFormat = options && options.format ? options.format : this.format
				let imgQuality = options && options.quality ? options.quality : this.quality
				const pm = new Promise((resolve, reject) => {
					if (!this.hasDrew) {
						reject(`Warning: Not Signned!`)
						return
					}
					var resImgData = this.canvasTxt.getImageData(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
					this.canvasTxt.globalCompositeOperation = 'destination-over'
					this.canvasTxt.fillStyle = this.myBg
					this.canvasTxt.fillRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
					this.resultImg = this.$refs.canvas.toDataURL(imgFormat, imgQuality)
					var resultImg = this.resultImg
					this.canvasTxt.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
					this.canvasTxt.putImageData(resImgData, 0, 0)
					this.canvasTxt.globalCompositeOperation = 'source-over'
					if (this.isCrop) {
						const crop_area = this.getCropArea(resImgData.data)
						var crop_canvas = document.createElement('canvas')
						const crop_ctx = crop_canvas.getContext('2d')
						crop_canvas.width = crop_area[2] - crop_area[0]
						crop_canvas.height = crop_area[3] - crop_area[1]
						const crop_imgData = this.canvasTxt.getImageData(...crop_area)
						crop_ctx.globalCompositeOperation = 'destination-over'
						crop_ctx.putImageData(crop_imgData, 0, 0)
						crop_ctx.fillStyle = this.myBg
						crop_ctx.fillRect(0, 0, crop_canvas.width, crop_canvas.height)
						resultImg = crop_canvas.toDataURL(imgFormat, imgQuality)
						crop_canvas = null
					}
					resolve(resultImg)
				})
				return pm
			},
			reset() {
				this.canvasTxt.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
				if (this.isClearBgColor) {
					this.$emit('update:bgColor', '')
					this.$refs.canvas.style.background = 'rgba(255, 255, 255, 0)'
				}
				this.points = []
				this.hasDrew = false
				this.resultImg = ''
			},
			getCropArea(imgData) {
				var topX = this.$refs.canvas.width
				var btmX = 0
				var topY = this.$refs.canvas.height
				var btnY = 0
				for (var i = 0; i < this.$refs.canvas.width; i++) {
					for (var j = 0; j < this.$refs.canvas.height; j++) {
						var pos = (i + this.$refs.canvas.width * j) * 4
						if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {
							btnY = Math.max(j, btnY)
							btmX = Math.max(i, btmX)
							topY = Math.min(j, topY)
							topX = Math.min(i, topX)
						}
					}
				}
				topX++
				btmX++
				topY++
				btnY++
				const data = [topX, topY, btmX, btnY]
				return data
			}
		}
	}
</script>

<style scoped>
	canvas {
		max-width: 100%;
		display: block;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300