uniapp手写签名板

签名组件

<template>
	<view>
		<view class="sign-content">
			<view>
				<view class="reset" @click="backClick" style="position:fixed;bottom: 466rpx;background:#fff;">返回</view>

				<view class="reset" @click="clearClick" style="position:fixed;bottom: 266rpx;background:#fff;">重写</view>

				<view class="reset" @click="saveClick" style="position:fixed;bottom: 66rpx;background: #39b54a;color:#fff;">确定</view>
			</view>

			<canvas
				class="sign"
				canvas-id="sign"
				@touchmove="move"
				@touchstart="start"
				@touchend="end"
				@touchcancel="cancel"
				@longtap="tap"
				disable-scroll="true"
				@error="error"
			></canvas>

			<view><view style="transform: rotate(90deg);text-align: center;position:fixed;width:130rpx;right:-14rpx;top:46%;">签名板</view></view>
		</view>
	</view>
</template>

<script>
let content = null;
let touchs = [];

export default {
	data() {
		return {
			isMove:false,
			createCanvas: false,
			outW: 0,
			outH: 0,
			windowsH:0,
			windowsW:0
		};
	},
	onLoad: function(options) {
		//获得Canvas的上下文
		content = uni.createCanvasContext('sign');
		this.windowsH = uni.getSystemInfoSync().windowHeight;
		this.windowsW = uni.getSystemInfoSync().windowWidth;
		//设置线的颜色
		content.setStrokeStyle('#000000');
		//设置线的宽度
		content.setLineWidth(5);
		//设置线两端端点样式更加圆润
		content.setLineCap('round');
		//设置两条线连接处更加圆润
		content.setLineJoin('round');
		// content.setFillStyle('white')
		// content.fillRect(0, 0, 750, 700)
		// content.draw()
	},
	methods: {
		backClick: function() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 画布的触摸移动开始手势响应
		start: function(event) {
			// console.log("触摸开始" + event.changedTouches[0].x);
			// console.log("触摸开始" + event.changedTouches[0].y);
			//获取触摸开始的 x,y
			let point = {
				x: event.changedTouches[0].x,
				y: event.changedTouches[0].y
			};
			touchs.push(point);
		},
		// 画布的触摸移动手势响应
		move: function(e) {
			let point = {
				x: e.touches[0].x,
				y: e.touches[0].y
			};
			touchs.push(point);
			if (touchs.length >= 2) {
				this.isMove = true;
				this.draw(touchs);
			}
		},
		// 画布的触摸移动结束手势响应
		end: function(e) {
			console.log('触摸结束' + e);
			//清空轨迹数组
			for (let i = 0; i < touchs.length; i++) {
				touchs.pop();
			}
		},
		// 画布的触摸取消响应
		cancel: function(e) {
			console.log('触摸取消' + e);
		},
		// 画布的长按手势响应
		tap: function(e) {
			console.log('长按手势' + e);
		},
		error: function(e) {
			console.log('画布触摸错误' + e);
		},
		//绘制
		draw: function(touchs) {
			let point1 = touchs[0];
			let point2 = touchs[1];
			touchs.shift();
			content.moveTo(point1.x, point1.y);
			content.lineTo(point2.x, point2.y);
			content.stroke();
			content.draw(true);
		},
		//清除操作
		clearClick: function() {
			//清除画布
			content.clearRect(0, 0, this.windowsW, this.windowsH);
			content.draw(true);
			this.isMove = false;
		},
		//保存图片
		saveClick: function() {
			if(this.isMove == false){
				uni.showToast({
					icon:'none',
					title:'请绘制签名'
				})
				return
			}
			var that = this;
			uni.showLoading({
				title: '请稍等'
			});
			uni.canvasToTempFilePath({
				canvasId: 'sign',
				success: function(res) {
					uni.getImageInfo({
						src: res.tempFilePath,
						fail() {
							uni.hideLoading();
							uni.showToast({
								title: '获取图片信息失败'
							});
						},
						success: function(image) {
							//要先设置在获取 ，加载问题
							image.height = parseInt(image.height);
							image.width = parseInt(image.width);
							that.outW = image.width;
							that.outH = image.height;
							//修复大屏手机无法生成图片问题
							let maxWidth = that.windowsW - uni.upx2px(240);
							let base =  that.outH / that.outW;
							if (that.outH > maxWidth) {
								that.outH = maxWidth;
								that.outW = Math.floor(that.outH / base);
							}
							content.rotate(-Math.PI / 2);
							content.translate(-that.outW, 0);
							content.drawImage(image.path, 0, 0, that.outW, that.outH);
							content.translate(that.outW, 0);
							content.rotate(Math.PI / 2);
							content.draw(false, () => {
								uni.canvasToTempFilePath({
									canvasId: 'sign',
									fileType: 'jpg',
									width: that.outH,
									height: that.outW,
									sdestWidth: image.height,
									sdestHeight: image.width,
									fail(res) {
										uni.hideLoading();
										uni.showToast({
											title: '签名失败',
											icon: 'none'
										});
									},
									success: function(resss) {
										uni.hideLoading();
										that.clearClick()
										uni.$emit('sign', resss.tempFilePath);
										uni.navigateBack();
										// let imgArr = [];
										// imgArr.push(resss.tempFilePath);
										// uni.previewImage({
										// 	urls: imgArr,
										// 	success(response) {
										// 		console.log(response);
										// 	}
										// });
									}
								});
							});
						}
					});
				},
				fail() {
					uni.hideLoading();
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.sign-content {
	display: flex;
	height: 100vh;
	background: #f1f1f1;
	/*  #ifdef  H5  */
	// height: calc(100vh - 44px);
	/*  #endif  */
	padding: 20rpx 0;
	box-sizing: border-box;

	.reset {
		background-color: rgb(248, 248, 248);
		border: 1px solid #ddd;
		transform: rotate(90deg);
		margin-top: 20rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		border-radius: 28rpx;
		border: none;
	}

	.tips {
		width: 600rpx;
		color: red;
		transform: rotate(90deg);
		height: 10px;
		position: fixed;
		left: -233rpx;
		top: 326rpx;
		/*  #ifdef  H5  */
		top: calc(326rpx + 88rpx);
		/*  #endif  */
		font-size: 34rpx;
	}

	.sign {
		flex: 1;
		height: 100%;
		margin-right: 100rpx;
		margin-left: 120rpx;
		border: 1px dashed #ddd;
		background-color: #fff;
	}
}

.g-btns {
	text-align: center;
	margin-top: 1rem;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	/* IE 9 */
	-moz-transform: rotate(90deg);
	/* Firefox */
	-webkit-transform: rotate(90deg);
	/* Safari 和 Chrome */
	-o-transform: rotate(90deg);
	position: absolute;
	top: 12rem;
	left: -6rem;
}

.g-btns {
	width: 7.5rem;
	height: 2.25rem;
	font-size: 0.9rem;
	font-weight: bold;
	border: none;
	border-radius: 1rem;
}

.u-reset {
	background: #ddd;
	color: #666;
	margin-right: 0.5rem;
}

.u-submit {
	background: #fc4949;
	color: #fff;
	margin-left: 0.5rem;
}
</style>

调用方法

onLoad(e) {
	//注册监听事件
	uni.$on('sign', (data) => {
		//base64编码的图片
		console.log(data);
		//处理自己的业务逻辑
	})
},
//销毁监听事件
onUnload() {
	uni.$off('sign');
},
methods: {
	//点击跳转到签名页面
	onSignImage() {
		uni.navigateTo({
			url: '/pages/common/xqm'
		});
	},
}