uniApp_canvas电子签字

uniApp_canvas电子签字

使用canvas实现手写电子签名功能，签字完成后将其转换为图片上传

组件实现完整代码

	<!-- 电子签名 -->
	<template>
		<view class="electronicSignature" >
			<u-popup v-model="show" mode="center" :borderRadius="12">
				<view class="eSign_popup">
					请在下方区域签字：
					<view class="" @touchmove.stop.prevent="moveHandle">
						<canvas class="mycanvas" canvas-id="mycanvas" @touchstart.stop="touchstart" @touchmove.stop="touchmove"
							@touchend.stop="touchend">
						</canvas>
					</view>
					<view class="foot">
						<u-button class="footBtn footBtn1" type="primary" @tap="resetSign"> 重 签 </u-button>
						<u-button class="footBtn" type="primary" @tap="signConfirm"> 确 认 </u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</template>

	<script>
		export default {
			name: "electronicSign",
			data() {
				return {
					show: false,
					ctx: null,
					points: [],
					headerStyleHeight: 0,
					headerStyleTop: 0,
					signature:'',
					path: '',
					image: '',
				};
			},
			created() {
				this.ctx = uni.createCanvasContext("mycanvas", this); //创建绘图对象
				// console.log('canvas对象',this.ctx)
				//设置画笔样式
				this.ctx.lineWidth = 3;
				this.ctx.lineCap = "round";
				this.ctx.lineJoin = "round";
				// 画笔颜色
				this.ctx.setStrokeStyle('#000');
			},
			methods: {
				// 当手指触摸Canvas时禁止页面滚动
				moveHandle(){
				    return;
				},
				//触摸开始，获取到起点
				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(); //绘制路径
					}
				},
				//触摸结束，清除points中的点
				touchend() {
					// console.log('结束')
					this.points = [];
				},
				// canvas绘制路径
				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)
				},
				//签字确认 
				signConfirm(){
					const that = this;
					this.$emit('confirm')
					// 将canvas中的签字转为临时文件（图片）
					uni.canvasToTempFilePath({
						canvasId: 'mycanvas',
						fileType: 'png',
						// destWidth: 100,
						// destHeight: 100,
						quality: 1,
						success: function(res) {
							// 重新设置画笔宽度，以防二次签字画笔变细
							that.ctx.lineWidth = 3;
							// 将图片上传到文件服务器
							uni.uploadFile({
								url: that.URL + '/api/open/upload/',
								filePath: res.tempFilePath,
								name:　'file',
								success: file=>{
									// 签字图片上传成功，将图片路径传给父级组件
									that.$emit('confirm',file.data)
									that.show = false;
								}
							})
						}
					})
					
				},
				// 重新签字
				resetSign(){
					this.clear();
				},
				//清空画布
				clear() {
					let that = this;
					uni.getSystemInfo({
						success(res) {
							let canvasw = res.windowWidth;
							let canvash = res.windowHeight;
							that.ctx.clearRect(0, 0, canvasw, canvash);
							that.ctx.draw(true);
						},
					})
				}
			}
		}
	</script>

<style lang="scss" scoped>
	.electronicSignature{
		.mycanvas{
			outline: 1rpx solid #999999;
			border-radius: 6rpx;
			width: 710rpx;
			height: 440rpx;
		}
		.eSign_popup{
			padding: 20rpx 6rpx;
			.foot{
				margin-top: 10rpx;
				display: flex;
			}
			.footBtn{
				width: 140rpx;
				height: 60rpx;
				border-radius: 14rpx;
				margin: auto;
				background-color: #24BBC5;
			}
			.footBtn1{
				background-color: #FFFFFF;
				color: red;
				border: 1rpx solid red;
			}
		}
	}
	
</style>