uniProject/components/writeSign/index.vue

<template>
	<view style="width: 750rpx ;height: 500rpx;">
		<jp-signature ref="signatureRef"></jp-signature>
	</view>
	<image :src="url" alt="" />
	<view>
		<button @click="clear">清空</button>
		<button @click="undo">撤消</button>
		<button @click="save">保存</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>