uniProject/components/writeSign/index.vue

<template>
	<view style="width: 750rpx ;height: 500rpx;">
		<jp-signature ref="signatureRef"></jp-signature>
	</view>
	<image v-show="false" :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)

						// 生成图片的临时路径
						// H5 生成的是base64
						//	this.url = res.tempFilePath
					}
				})
			},
			// 转换	 app
			base64(tempFilePath) {
				let base64Code;
				let path = plus.io.convertLocalFileSystemURL(tempFilePath);
				console.log('tempFilePath',tempFilePath);
				console.log('path',path);
				let fileReader = new plus.io.FileReader();
				fileReader.readAsDataURL(path);
				fileReader.onloadend = res => {
					console.log('res',res);
					base64Code = res.target.result;
					this.url = res.target.result
					this.$emit('getBase64',this.url)
					console.log('base64Code',base64Code);
				}
		
			},
			// miniProgramConvertToBase64(tempFilePath) {
			// 				uni.getFileSystemManager().readFile({
			// 					filePath: tempFilePath,
			// 					encoding: 'base64',
			// 					success: (res) => {
			// 						let base64 = 'data:image/png;base64,' + res.data
			// 						console.log('小程序base64转换成功，长度:', base64.length)
			// 						this.url = base64
			// 					},
			// 					fail: (err) => {
			// 						console.error('小程序转换失败:', err)
			// 						// 转换失败时保持使用临时路径
			// 						uni.showToast({
			// 							title: '转换失败，使用原图',
			// 							icon: 'none'
			// 						})
			// 					}
			// 				})
			// 			},
		
			clear() {
				this.$refs.signatureRef.clear()
			},
			undo() {
				this.$refs.signatureRef.undo()
			},

		}
	}
</script>