uni-app 利用canvas实现对协议的签名导出带有签名的协议

html

<template>
	<view class="canvas">
		<canvas canvas-id="myCanvas" :width="canvasWidth" :height="canvasHeight" :style="{height:canvasHeight+'px'}"  @touchstart="onstart($event)" @touchmove="onmove($event)" @touchend="onend($event)"></canvas>
		
		<button type="default" @click="clear">清除</button>
		
		<button type="default" @click="Submit">提交</button>
		<image :src="hcSrc" class="qianming" :style="{height:canvasHeight+'px'}"></image>
	</view>

</template>

script

export default{
		data(){
			return{
				canvasHeight:568,
				canvasWidth:320,
				ctx:null,
				points:[],//路径点集合
				hcSrc:'',
				bgcImg:'/static/12.jpg',
			}
		},
		onLoad() {
			console.log('onLoad')
		},
		onReady() {
			this.mapping();
		},
		created(){
			console.log('oncreated')
		},
		mounted(){
			console.log('munted')
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					console.log(res)
					 _this.canvasHeight = res.screenHeight-100;
					 _this.canvasWidth = res.screenWidth;
					
				}
			})
		},
		methods:{
			//关闭清空画布
			close:function(){
				
				this.clear();
			},
			//创建并显示画布
			mapping(){
				let _this = this;
				
				const ctx = wx.createCanvasContext('myCanvas',this);
				// 协议为背景
				
				uni.getImageInfo({
					src:_this.bgcImg,
					success(res){
						console.log(res)
						ctx.drawImage(res.path, 0, 0,  _this.canvasWidth, _this.canvasHeight);
						ctx.draw(true);
					}
				})
				
				this.ctx = ctx;
				
				this.ctx.lineWidth = 4;
				this.ctx.lineCap = "round";
				this.ctx.lineJoin = "round";
			},
			
			//触摸开始，获取到起点
			onstart($event){
				let startX = $event.changedTouches[0].x;
				let startY = $event.changedTouches[0].y;
				let startPoint = {X:startX,Y:startY};
				this.points.push(startPoint);
				//每次触摸开始，开启新的路径
				this.ctx.beginPath();
			},
			//触摸移动，获取到路径点
			onmove($event){
				let moveX = $event.changedTouches[0].x;
				let moveY = $event.changedTouches[0].y;
				let movePoint = {X:moveX,Y:moveY};
				this.points.push(movePoint);//存点
				let len = this.points.length;
				if(len>=2){
					this.draw(); //绘制路径
				}
			},
			//触摸结束，将未绘制的点清空防止，对后续路径产生干扰
			onend($event){
				this.points = [];
			},
			/**
			 * 绘制笔迹
			 * 1、为保证笔迹实时显示，必须在移动的同时绘制笔迹
			 * 2、为保证笔迹连续，每次从路径集合中区别两个点为起点(moveTo)和终点（lineTo）
			 * 3、将上一次的终点作为下一次绘制的起点(即清除第一个点)
			 * */
			 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:function(){
				 let _this = this;
				 uni.getSystemInfo({
				 	success(res) {
				 		let canvasw = res.screenWidth;
						let canvash = res.screenHeight-100;
						_this.ctx.clearRect(0,0,canvasw,canvash);
						_this.ctx.draw(true);
						
				 	}
				 })
			 },
			
			 //提交协议与签名的合成图片
			 Submit(){
				 let _this = this;
				 
				 //导出生成带签名的协议
				 
				 uni.canvasToTempFilePath({
				 	canvasId:'myCanvas',
				 	success(res) {
				 		console.log(res)
				 		_this.hcSrc = res.tempFilePath;
				 		
				 	}
				 })
			 },
			
		}
	}

css

uni-canvas,.qianming{
		width: 100%;
		height: 100%;
	}
	.canvas{
		position: relative;
	}
	button{
		width: 25%;
		display: inline-block;
		text-align: center;
	}