2022年06月11日

现有插件无法正常在微信小程序内签名，改为其他插件uniapp微信小程序canvse签名
参考地址 signature-pad-wx非常感谢

修改后地址 signature-pad-wx-master_uni

<template>
	<view class="write-box">
		<u-sticky>
			<u-navbar :title="$t('transportAgreementSigned')" :safeAreaInsetTop="true" :placeholder='true'
				:autoBack="true">
			</u-navbar>
		</u-sticky>
		<view class="head">
			<view class="title">
				{{$t('autograph.tips')}}
			</view>
		</view>
		<view class="write-block">
			<canvas type="2d" :disable-scroll="true" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
				@touchend="handleTouchEnd" id="myCanvas"></canvas>
		</view>
		<view class="foot">
			<button type="default" class="btn" @tap='handleClearCanvas'>{{$t('rewrite')}}</button>
			<button type="default" class="btn" @tap="handleSaveCanvas">{{$t('submit')}}</button>
		</view>
	</view>
</template>

<script>
	// pages/canvas/canvas.js
	import SignaturePad from '../../utils/signature_pad.js';
	export default {
		data() {
			return {
				canvas: null,
				signaturePad: new SignaturePad()
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {
			const query = uni.createSelectorQuery();
			query
				.select('#myCanvas')
				.fields({
					node: true,
					size: true
				})
				.exec((res) => {
					const canvas = res[0].node;
					const ctx = canvas.getContext('2d');
					const dpr = uni.getSystemInfoSync().pixelRatio;
					canvas.width = res[0].width * dpr;
					canvas.height = res[0].height * dpr;
					ctx.scale(dpr, dpr);
					this.signaturePad.init(canvas);
					this.setData({
						canvas: canvas
					});
				}); // const signaturePad = new SignaturePad(context)
		},
		methods: {
			handleTouchStart(event) {
				this.signaturePad.handleTouchStart(event);
			},

			handleTouchMove(event) {
				this.signaturePad.handleTouchMove(event);
			},

			handleTouchEnd(event) {
				this.signaturePad.handleTouchEnd(event);
			},

			handleSaveCanvas(event) {
				if (!this.canvas) {
					return;
				}
				uni.canvasToTempFilePath({
					canvas: this.canvas,
					success(res) {
						console.log(res)
						uni.request({
							url: res.tempFilePath, //临时路径
							responseType: 'arraybuffer', //设置返回的数据格式为arraybuffer
							success: res => {
								const base64 = "data:image/png;base64," + uni.arrayBufferToBase64(
									res.data)
								console.log(base64)
								// that.baseAddress = base64
							}
						})
					}
				})
				return 
				uni.canvasToTempFilePath({
					canvas: this.canvas,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: `${res.tempFilePath}`,

							success(res) {
								uni.showToast({
									title: '保存成功'
								});
							},

							fail(err) {
								uni.showToast({
									title: '保存失败'
								});
							}
						});
					}
				});
			},

			handleClearCanvas(event) {
				this.signaturePad.clear();
			}
		}
	};
</script>
<style scoped lang="scss">
	.write-box {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 30rpx;

		.title {
			font-size: 30rpx;
			color: #333333;
			text-align: center;
			line-height: 88rpx;
			height: 88rpx;
		}

		.write-block {
			border: 1rpx dashed #aaaaaa;
			border-radius: 10rpx;
			height: 572rpx;
		}

		.foot {
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btn {
				font-size: 30rpx;
				color: #fff;
				background-color: #cccccc;
				border-radius: 10rpx;
				height: 74rpx;
				line-height: 74rpx;
				width: 196rpx;
				margin: 0 30rpx;
			}
		}
	}

	.body {
		height: 400rpx;
	}

	.mycanvas {
		height: 572rpx;
	}
</style>

gitee地址

gitee