微信小程序 电子签名

<template>
	<view class="bx">
		<view class="bx1">{
    
    {
    
    title}}</view>
		<view class="bx2">
			<view class="bx21">
				<image :src="scrA111" style="width: 100%;height: 100%;margin: 0;"></image>
			</view>
		</view>
		<view class="bx3">
			<view class="bx31" v-if="signIdString">



				<canvas style="width: 100%;height: 100%;" :id="signIdString" :class="signIdString" :disable-scroll="true" @touchstart="touchstart"
					@touchmove="touchmove" @touchend="touchend" :canvas-id="signIdString"></canvas>



			</view>
			<view class="bx32">
				<view @click="retDraw">重置</view>
				<view @click="qrqm">确认签名</view>
			</view>
		</view>
	</view>
</template>

<script> 
	import {
    
    
		baseurls
	} from '@/config/utils/baseUrl.js';
	export default {
    
    
		props: {
    
    
			title: {
    
    
				type: String,
				default: () => '签名'
			}
		},
		created() {
    
    
			this.signIdString = 'sign' + (new Date()*1);
			
			this.$nextTick(() => {
    
    

				let ctx = wx.createCanvasContext(this.signIdString, this);

				this.ctx = ctx;
				this.ctx.lineWidth = 3;
				this.ctx.lineCap = 'round';
				this.ctx.lineJoin = 'round';
				this.ctx.setFillStyle('#000000')
				
				
			})
		},
		data() {
    
    
			return {
    
    
				ctx: '', //绘图图像
				points: [], //路径点集合,
				scrA111: '',
				tempPoint:[],
				htmlJspnImage:'',
				signIdString:''
			}
		},
		methods: {
    
    
			GetUrlHttp(){
    
    
				if(this.htmlJspnImage){
    
    
					return this.htmlJspnImage;
				} 
				return '';
			},
			qrqm() {
    
    
				if (this.tempPoint.length == 0) {
    
    
					uni.showToast({
    
    
						title: '请先签名',
						icon: "none"
					})
					return;
				}
				var that = this


				this.ctx.draw(
					true,
					wx.canvasToTempFilePath({
    
    
						canvasId: that.signIdString,
						fileType: 'png',
						quality: 1, //图片质量
						success(res) {
    
    
							// console.log(res.tempFilePath, '待上传服务器canvas生成图片地址');
							that.scrA111 = res.tempFilePath;
							//上传
							wx.uploadFile({
    
    
								url: baseurls + '/upload/uploadFile',
								filePath: res.tempFilePath,
								name: 'files',
								header: {
    
    
									'content-type': 'multipart/form-data'
								},
								formData: {
    
    },
								success: uploadFileRes => {
    
    
									var r = JSON.parse(uploadFileRes.data);
									// r.data.msg.file1  上传的图片路径
									that.htmlJspnImage = r.data.msg.file1
								}
							});
						},
						fail(err) {
    
    

							uni.showToast({
    
    
								title: err.errMsg,
								icon: "none"
							})
						}
					}, this)
				)
			},
			retDraw() {
    
    
				this.ctx.clearRect(0, 0, 300, 150);
				this.ctx.draw();
				this.ctx.lineWidth = 3;
				this.ctx.lineCap = 'round';
				this.ctx.lineJoin = 'round';
				this.ctx.setFillStyle('#000000')
				this.tempPoint = []
				this.scrA111 = ""
			},
			//触摸开始，获取到起点
			touchstart: function(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: function(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(); //绘制路径
				}
				this.tempPoint.push(movePoint);
			},
			touchend: function() {
    
    
				this.points = [];
			},
			draw: function() {
    
    
				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);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.bx {
    
    
		margin: 24rpx;
		box-sizing: border-box;


		.bx1 {
    
    
			width: 300rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			background-color: #f1f1f1;
		}

		.bx2 {
    
    
			height: 120rpx;
			background-color: white;
			border-bottom: 4rpx solid #f1f1f1;
			display: flex;
			align-items: center;

			.bx21 {
    
    
				width: 160rpx;
				height: 70rpx;
				margin-left: 24rpx;
				box-sizing: border-box;
				border: 2rpx solid #f1f1f1;
			}
		}

		.bx3 {
    
    
			background-color: white;
			padding: 24rpx;
			box-sizing: border-box;

			.bx31 {
    
    
				height: 320rpx;
			}
		}

		.bx32 {
    
    
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			height: 80rpx;

			view {
    
    
				background-color: red;
				color: white;
				padding: 12rpx 24rpx;
				box-sizing: border-box;
				margin-left: 24rpx;
			}
		}

		.sign {
    
    
			width: 100%;
			height: 100%;
		}
	}
</style>