uniapp创建电子签名

参考：(9条消息) unniapp实现电子签名_你知不知的博客-CSDN博客_uniapp签名板

上面那位大佬写的不全，然后做了写修改

这是封装的电子签名组件

父组件：

//页面
<template>
    <view>
        <button type="primary" @tap="doss" style="margin: 10px;">点击签名</button>
	    <view class="imgs"><image class="img" :src="img1" mode="widthFix" style="margin: 0px 24px;"></image></view>
	    <catSignature canvasId="canvas1" @close="close" @save="save" :visible="isShow" ref="hello"/>
    </view>
</template>

//js
<script>
    import catSignature from '@/components/canvas.vue';
    //引入组件
    components: {
			catSignature
	},


    //data函数
	isShow: false,
	img1:"",

    
    //methods函数
	doss() {
	    this.isShow = true;
	},
	close() {
		this.isShow = false;
	},
	save(val) {
		this.isShow = false;
		this.img1 = this.$refs.hello.signImage;
	},

</script>

子组件：

<template>
	<view class="uni-list list-pd">
		<view v-if="visibleSync" class="cat-signature" :class="{ visible: show }" @touchmove.stop.prevent="moveHandle">
			<view class="mask" @tap="close" />
			<view class="content">
				<canvas class="firstCanvas" :canvas-id="canvasId" name="autograph" @touchmove="move"
					@touchstart="start($event)" @touchend="end" @touchcancel="cancel" @longtap="tap"
					disable-scroll="true" @error="error" />
				<view class="btns">
					<view class="btn" @tap="clear">清除</view>
					<view class="btn" @tap="save">保存</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	//获取系统信息
	uni.getSystemInfo({
		success: function(res) {
			canvasw = res.windowWidth;
			canvash = (canvasw * 9) / 16;
		}
	});
	export default {
		name: 'cat-signature',
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			canvasId: {
				type: String,
				default: 'firstCanvas'
			}
		},
		data() {
			return {
				show: false,
				visibleSync: false,
				signImage: '',
				hasDh: false
			};
		},
		watch: {
			visible(val) {
				this.visibleSync = val;
				this.show = val;
				this.getInfo();
			}
		},

		created(options) {
			this.visibleSync = this.visible;
			this.getInfo();
			setTimeout(() => {
				this.show = this.visible;
			}, 100);
		},
		methods: {
			getInfo() {
				//获得Canvas的上下文
				content = uni.createCanvasContext(this.canvasId, this);
				//设置线的颜色
				content.setStrokeStyle('#000');
				//设置线的宽度
				content.setLineWidth(5);
				//设置线两端端点样式更加圆润
				content.setLineCap('round');
				//设置两条线连接处更加圆润
				content.setLineJoin('round');
			},
			//
			close() {
				this.show = false;
				this.hasDh = false;
				this.$emit('close');
			},
			moveHandle() {},
			// 画布的触摸移动开始手势响应
			start(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				};
				touchs.push(point);
				this.hasDh = true;
			},
			// 画布的触摸移动手势响应
			move: function(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				};
				touchs.push(point);
				if (touchs.length >= 2) {
					this.draw(touchs);
				}
			},

			// 画布的触摸移动结束手势响应
			end: function(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];
				// console.log(JSON.stringify(touchs))
				content.moveTo(point1.x, point1.y);
				content.lineTo(point2.x, point2.y);
				content.stroke();
				content.draw(true);
				touchs.shift();
			},
			//清除操作
			clear: function() {
				//清除画布
				content.clearRect(0, 0, canvasw, canvash);
				content.draw(true);
				// this.close()
				this.hasDh = false;
				this.$emit('clear');
			},
			save() {
				var that = this;
				if (!this.hasDh) {
					uni.showToast({
						title: '请先签字',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '生成中...',
					mask: true
				});
				setTimeout(() => {
					uni.canvasToTempFilePath({
							canvasId: this.canvasId,
							success: function(res) {
								that.signImage = res.tempFilePath;
								that.$emit('save', res.tempFilePath);
								uni.hideLoading();
								that.hasDh = false;
								that.show = false;
							},
							fail: function(err) {
								console.log(err);
								uni.hideLoading();
							}
						},
						this
					);
				}, 100);
			}
		}
	};
</script>

<style lang="scss">
	.cat-signature.visible {
		visibility: visible;
	}

	.cat-signature {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		z-index: 11;
		height: 100vh;
		visibility: hidden;

		.mask {
			display: block;
			opacity: 0;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.4);
			transition: opacity 0.3s;
		}

		.content {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 94%;
			height: 500upx;
			background: #fff;
			border-radius: 8upx;
			box-shadow: 0px 3px 3px #333;

			// canvas
			.firstCanvas {
				background-color: #fff;
				width: 100%;
				height: 400upx;
			}

			// canvas

			.btns {
				padding: 0 15px;
				height: 100upx;
				overflow: hidden;
				position: absolute;
				bottom: 10upx;
				left: 0;
				right: 0;
				margin: auto;
				display: flex;
				justify-content: space-between;

				.btn {
					width: 40%;
					text-align: center;
					font-size: 28upx;
					height: 60upx;
					line-height: 60upx;
					background-color: #999;
					color: #fff;
					border-radius: 6upx;
				}
			}
		}
	}

	.visible .mask {
		display: block;
		opacity: 1;
	}

	.uni-list:after {
		// 全局样式里面有一个，所以我们用白色把他隐藏起来
		background-color: #ffffff;
	}
</style>

完成！！！