uniProject/components/writeSign/index.vue

<template>
	<view class="ht-qm-box">
		<view class="qm-tip-box">
			<view>手写签名</view>
			<jp-signature ref="signatureRef"></jp-signature>
			<view class="qm-tip-text">
				注意事项：<br/>
				1.请仔细阅读全文，确认完全理解条款后签名。<br/>
				2.需本人手写签名，签字即视为认可合同内容。<br/>
				3.签名具有法律效力，签署后须履行约定义务，纠纷以签名数据为法律凭据。
			</view>
		</view>
	</view>
	<image v-show="false" :src="url" alt="" />
	<view class="ht-btn-box">
		<button @click="save" type="default" class="phone-green-btn">保存</button>
		<button @click="clear" type="default" class="phone-white-btn">清空</button>
		<!-- <button @click="undo">撤消</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '',
			}
		},
		methods: {
			save() {
				this.$refs.signatureRef.canvasToTempFilePath({
					success: (res) => {
						// 是否为空画板 无签名
						console.log(res.isEmpty)
						console.log(res)
						this.base64(res.tempFilePath)
					}
				})
			},
			base64(tempFilePath) {
							uni.getFileSystemManager().readFile({
								filePath: tempFilePath,
								encoding: 'base64',
								success: (res) => {
									console.log('res111',res);
									let base64 = 'data:image/png;base64,' + res.data
									console.log('小程序base64转换成功，长度:', base64.length)
									this.url = base64
									this.$emit("getBase64",this.url)
								},
								fail: (err) => {
									console.error('小程序转换失败:', err)
									// 转换失败时保持使用临时路径
									uni.showToast({
										title: '转换失败，使用原图',
										icon: 'none'
									})
								}
							})
						},
		
			clear() {
				this.$refs.signatureRef.clear()
			},
			undo() {
				this.$refs.signatureRef.undo()
			},

		}
	}
</script>