canvas 实现APP签名

uni.createCanvasContext(this.canvasId, this);
uni.canvasToTempFilePath(object, component)把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径

 uni.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
  canvasId: 'myCanvas',
  success: function(res) {
    // 在H5平台下，tempFilePath 为 base64
    console.log(res.tempFilePath)
  } 
})

<signature ref='sign' @getUrl='getUrl' v-if="isUpdate"></signature>

1.创建canvas标签
2.uni.getSystemInfo获取系统信息设置大小
3.uni.createCanvasContext创建canvas实例
4.创建一个数组来存储移动数据
5.当手指按下，往数组里面push 一个包含x，y的对象
6.当手指移动的时候往数组里面添加数据，moveTo，lineTo进行绘制
7.清空使用clearRect
7. uni.canvasToTempFilePath把canvas生成图片

 <template>
	<view>
		<view class="content">
			<canvas
				class="firstCanvas"
				:canvas-id="canvasId"
				@touchmove="move"
				@touchstart="start($event)"
				@touchend="end"
				@touchcancel="cancel"
				@longtap="tap"
				disable-scroll="true"
				@error="error"
				v-if="!show"
			/>

			<!-- <view>
				签字情况说明：
				<input class="input_description" placeholder="签字情况说明" />
			</view>
			<view>
				备注：
				<textarea class="remark" placeholder="" />
			 </view> -->
			<!-- <view class="content-button" v-if="!show"> -->
			<!-- <button type="primary" class="primaryBtn" @tap="save"><span>预览</span></button> -->
			<!-- <button type="primary" class="primaryBtn"><span>暂存</span></button>
				<button class="uni-button"><span>提交</span></button> -->
			<!-- <button type="primary" class="primaryBtn" @tap="clear"><span>清除</span></button> -->
			<!-- <button type="primary" class="primaryBtn" @tap="save"><span>保存</span></button> -->

			<!-- </view> -->
		</view>
		<view v-if="show" class="cat-signature" :class="{ visible: show }" @touchmove.stop.prevent="moveHandle">
			<view :class="{ mask: show }" @tap="close" />

			<view class="imgs"><image class="img" :src="imgSrc" mode="widthFix"></image></view>
		</view>
	</view>
</template>

<script>
var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
//获取系统信息
uni.getSystemInfo({
	success: function(res) {
		canvasw = res.windowWidth*3;
		canvash = res.windowHeight*3; 
	}
});
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,
			imgSrc: ''
		};
	},
	watch: {},
	created(options) {
		this.getInfo();
	},
	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) {
							// #ifdef H5
							that.signImage = res.tempFilePath;
							that.imgSrc = res.tempFilePath;
							uni.hideLoading();
							that.hasDh = false;
							console.log('xxx' + res.tempFilePath);
							that.$emit('getUrl', res.tempFilePath);
							// #endif
							// #ifndef H5
							plus.io.resolveLocalFileSystemURL(res.tempFilePath, function(entry) {
								console.log('xxx' + entry);
								entry.file(function(file) {
									var fileReader = new plus.io.FileReader();
									fileReader.readAsDataURL(file);
									fileReader.onloadend = function(evt) {
										console.log('Read success');
										console.log(evt.target.result);

										that.$emit('getUrl', evt.target.result);
									};
								});
							});
							// #endif
						},
						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;
		z-index: -1;
	}
}

.visible .mask {
	display: block;
	opacity: 1;
}
.content {
	display: block;
	/* position: absolute;
			top: 15px;
			left: 0;
			bottom:0;
			right: 0; */
	margin: 5vh auto;
	width: 94%;
	height: 70vh;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.07);
	border-radius: 5px;
	// border-radius: 8upx;
	// box-shadow: 0px 3px 3px #333;
	// canvas
	.firstCanvas {
		background-color: #fff;
		width: 93%;
		height: 70vh;
		// border: 1px solid #959595;
		margin: 0 25upx;
	}
	// canvas
	.input_description {
		border: 1px solid rgba(149, 149, 149, 1);
		height: 25px;
	}
	.remark {
		border: 1px solid rgba(149, 149, 149, 1);
		height: 60px;
	}
	.content-button {
		padding-top: 16rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0 25upx;
		.primaryBtn {
			line-height: unset;
			margin: 0;
			padding: 16rpx 0rpx;
			width: 170rpx;
			text-align: center;
			background: #efefef;
			color: #4d8bf7;
			border: 1px solid #4d8bf7;
		}
		.uni-button {
			line-height: unset;
			margin: 0;
			padding: 16rpx 0rpx;
			width: 170rpx;
			text-align: center;
			background: rgba(77, 139, 247, 1);
		}
		.uni-button span {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(254, 254, 254, 1);
			letter-spacing: 3rpx;
		}
	}
}

.imgs {
	width: 93%;
	height: 378upx;
	display: flex;
	margin: 0 auto;
	flex-wrap: wrap;
	background-color: #fff;
	margin-top: 50px;
}
.imgs img {
	width: 100%;
	height: 100%;
}
</style>