unniapp实现电子签名

先放效果图


主页面代码：

<!-- 这是签名 -->
<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" />

data() {
	return {
		isShow: false,
	}
}

js代码
doss() {
	this.isShow = true;
},
close() {
	this.isShow = false;
},
save(val) {
	this.isShow = false;
	this.img1 = this.$refs.hello.signImage;
	// console.log('微信小程序产生的',this.img1);
}

实现电子签名的组件代码

<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>

千万要记得引用电子签名代码哦

// 调用手写签名组件,路径记得修改
import catSignature from '@/common/cat-signature.vue';

export default {
	components: {
		catSignature
	},
}