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 size="mini" @click="save" type="default" class="phone-green-btn">保存</button>
		<button size="mini" @click="clear" type="default" class="phone-white-btn">清空</button>
		<!-- <button size="mini" @click="undo" type="default" class="phone-white-btn">撤消</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>