jje_uniapp/myPages/components/sign/sign.vue

<template>
	<view class="signature-box">
        <view class="sign-wrap" v-show="showCanvas">
			
			<!-- 签名 -->
			<view class="signature" >
				<view class="signature-title">
					<text>请输入签名信息</text>
				</view>
				<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
				<view class="footer">
					<u-button @click="saveCanvasImg" type="primary" :plain="true" :ripple="true" ripple-bg-color="#909399">保存</u-button>
					<u-button @click="clear" type="warning" :plain="true" :ripple="true" ripple-bg-color="#909399">清除</u-button>
					<u-button @click="close" type="error" :plain="true" :ripple="true" ripple-bg-color="#909399">关闭</u-button>
				</view>
			</view>
			        
			 <!-- 签完名后生成的图片 -->
			<view v-show="SignatureImg" class="SignatureImg">
				<image :src="SignatureImg" mode=""></image>
			</view>
			        
			<!-- 清除签完名后生成的图片 -->
			<u-button v-show="SignatureImg" @click="obliterate" type="error" :plain="true" :ripple="true" ripple-bg-color="#909399" size="medium">清除签名</u-button>
		</view>
		
	</view>
</template>


<script>
	var x = 20;
	var y = 20;
	export default {
		data() {
			return {
				//绘图图像
				ctx: '', 
				//路径点集合
				points: [], 
				//签名图片
				SignatureImg: ''
			};
		},
		props: ['showCanvas'],
		methods: {
			//清除签名的图片
			obliterate() {
				if (this.SignatureImg) {
					this.SignatureImg = '';
				}
				this.close();
			},
			//关闭并清空画布
			close() {
				this.$emit('closeCanvas');
				this.clear();
			},
			//创建并显示画布
			createCanvas() {
				this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
				//设置画笔样式
				this.ctx.lineWidth = 4;
				this.ctx.lineCap = 'round';
				this.ctx.lineJoin = 'round';
			},
			//触摸开始，获取到起点
			touchstart(e) {
				let startX = e.changedTouches[0].x;
				let startY = e.changedTouches[0].y;
				let startPoint = { X: startX, Y: startY };
				this.points.push(startPoint);
				//每次触摸开始，开启新的路径
				this.ctx.beginPath();
			},
			//触摸移动，获取到路径点
			touchmove(e) {
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				let movePoint = { X: moveX, Y: moveY };
				this.points.push(movePoint); //存点
				let len = this.points.length;
				if (len >= 2) {
					this.draw(); //绘制路径
				}
			},
			// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
			touchend() {
				this.points = [];
			},
			//绘制笔迹
			draw() {
				let point1 = this.points[0];
				let point2 = this.points[1];
				this.points.shift();
				this.ctx.moveTo(point1.X, point1.Y);
				this.ctx.lineTo(point2.X, point2.Y);
				this.ctx.stroke();
				this.ctx.draw(true);
			},
			//清空画布
			clear() {
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						let canvasw = res.windowWidth;
						let canvash = res.windowHeight;
						that.ctx.clearRect(0, 0, canvasw, canvash);
						that.ctx.draw(true);
					}
				});
			},
			//完成绘画并保存到本地
			saveCanvasImg() {
				let that = this;
				//#ifdef MP-WEIXIN
				wx.canvasToTempFilePath({
					canvasId: 'mycanvas',
					fileType: 'png',
					quality: 1, //图片质量
					success(res) {
						console.log(res.tempFilePath, 'canvas生成图片地址');
						that.$emit('saveCanvasImg',res.tempFilePath);
						that.$emit('closeCanvas');
						that.close();
					},
					fail(e) {
						console.log(e)
					},
					complete(e) {
						console.log(e)
					}
				},this);
				//#endif
				
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					success: function(res) {
						console.log(res);
						// that.SignatureImg = res.tempFilePath;
						that.$emit('saveCanvasImg',res.tempFilePath);
						that.$emit('closeCanvas');
						that.close();
					}
				}); 
				/* uni.canvasToTempFilePath(
					{
						canvasId: 'mycanvas',
						success: function(res) {
							console.log(res);
							that.SignatureImg = res.tempFilePath;
							
							that.$emit('saveCanvasImg','aaa');
							
						}
					},
				); */
			}
		},
		mounted() {
			this.createCanvas();
		}
	};

</script>

<style  scoped>
.signature-box {
	/* display: flex;
	flex-direction: column;
	align-items: center;
	background: #fff; */
	/* 签名模块 */
}
.sign-wrap{
	margin: 0 auto;
	height: 100%;
	background: #F0F0F0;
	/* position: fixed; */
	/* top: 0px; */
	z-index: 10080;
	width: 100%;
	
}
.signature {
}
.signature-title{
	background: #fff;
	border-bottom: 1px solid #19BE6B;
	line-height: 36px;
	text-align: center;
	font-size: 16px;
}
.mycanvas {
	
	width: 100%;
	/* height: calc(100vh - 200upx); */
	height: 140px;
	background-color: #fff;
}
/* 底部按钮 */
.footer {
	font-size: 14px;
	height: 150upx;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
/* 生成的图片 */
.SignatureImg {
	background: #fff;
}
.SignatureImg image{
	width: 750rpx;
	height: 750rpx;
}

</style>

<style>
	page {
		background: #fbfbfb;
		/* height: auto; */
		/* overflow: hidden; */
	}

	.wrapper {
		width: 100%;
		height: 95vh;
		margin: 30rpx 0;
		overflow: hidden;
		display: flex;
		align-content: center;
		flex-direction: row;
		justify-content: center;
		font-size: 28rpx;
	}

	.handWriting {
		background: #fff;
		width: 100%;
		height: 95vh;
	}

	.handRight {
		display: inline-flex;
		align-items: center;
	}

	.handCenter {
		border: 4rpx dashed #e9e9e9;
		flex: 5;
		overflow: hidden;
		box-sizing: border-box;
	}

	.handTitle {
		transform: rotate(90deg);
		flex: 1;
		color: #666;
	}

	.handBtn button {
		font-size: 28rpx;
	}

	.handBtn {
		height: 95vh;
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		align-content: space-between;
		flex: 1;
	}

	.delBtn {
		position: absolute;
		top: 250rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.delBtn image {
		position: absolute;
		top: 13rpx;
		left: 25rpx;
	}

	.subBtn {
		position: absolute;
		bottom: 52rpx;
		left: -3rpx;
		display: inline-flex;
		transform: rotate(90deg);
		background: #008ef6;
		color: #fff;
		margin-bottom: 30rpx;
		text-align: center;
		justify-content: center;
	}

	/*Peach - 新增 - 保存*/

	.saveBtn {
		position: absolute;
		top: 375rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.previewBtn {
		position: absolute;
		top: 500rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.uploadBtn {
		position: absolute;
		top: 625rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	/*Peach - 新增 - 保存*/

	.black-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 30rpx;
		left: 25rpx;
	}

	.black-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 100rpx;
		left: 10rpx;
	}

	.red-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 140rpx;
		left: 25rpx;
	}

	.red-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 120rpx;
		left: 10rpx;
	}
</style>