电子签名实现-Cordova 压缩 旋转

<template>
	<view class="new_file" v-if="showAutograph" catchtouchmove="noneEnoughPeople">
		<view class="popupBox">
			<view class="popupTopBox">签名</view>
			<canvas class="mycanvas" :disable-scroll="true" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
			<view class="">
				<u-button throttle-time="3000" type="primary" class="determineBtn1" @click="confirm" :disabled="loading">完成</u-button>
				<u-button type="error" class="determineBtn2" @click="clear">重置</u-button>
				<u-button type="default" class="determineBtn3" @click="cancel">退出</u-button>
			</view>
		</view>
		<canvas canvas-id="camCacnvs" :style="{width:width +'px',height:height +'px'}"  class="canvsborder"></canvas>
		<canvas canvas-id="rotateCanvas" :style="{width:ch +'px',height:cw +'px',position: 'absolute',left: -10000+'rpx',top: -10000+'rpx'}"></canvas>
	</view>
</template>

<script>
export default {
	props:{
		frameNumber:{
			type:String,
			default:() => []
		},
	},
	data() {
		return {
			showAutograph: false,
			ctx: '', //绘图图像
			points: [], //路径点集合
			signature: '',
			canvas_w:100,
			canvas_h:100,
			flag:false,
			width:0,
			height:0,
			submitFlag:true,
			loading:false,
			cw:0,
			ch:0

		};
	},
	watch:{
		frameNumber(o,n) {
		}
	},
	mounted() {
		
	},
	methods: {
		//创建并显示签名画布
		autograph() {
			this.showAutograph = true;
			//创建绘图对象
			this.ctx = uni.createCanvasContext('mycanvas', this);
			//设置画笔样式
			this.ctx.lineWidth = 4;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';
		},
		//触摸开始，获取到起点
		touchstart(e) {
			console.log('开始')
			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) {
			// console.log('移动')
			this.flag = true
			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(); //绘制路径
			}
			// console.log(this.points)
		},
		// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
		touchend() {
			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() {
			let that = this;
			this.flag = false
			uni.getSystemInfo({
				success: function(res) {
					let canvasw = res.windowWidth;
					let canvash = res.windowHeight;
					that.ctx.clearRect(0, 0, canvasw, canvash);
					that.ctx.draw(true);
				}
			});
		},
		//关闭并清空画布
		cancel() {
			this.showAutograph = false;
			this.clear();
		},
		//完成绘画并保存到本地
		confirm() {
			//判断是否进行了签名
			if(!this.flag){
				uni.toast('请签名后再继续操作!')
				return false
			}
			
			let that = this;
			that.loading = true
			this.exportImg()
		},
		noneEnoughPeople(){
			
		},
		//导出图片函数
		exportImg(){
			let that = this
			uni.showLoading({
				title:"处理中",
				mask:true,
			})
			uni.canvasToTempFilePath({
				canvasId: 'mycanvas',
				fileType: 'png',
				destWidth: 600,
				destHeight: 1600,
				quality: 0.8,
				success: function(res) {
					that.rotateUp(res.tempFilePath)
				}
			},this);
		},
		zipImg(url){
			let that = this
			uni.getImageInfo({
				src:url,//传递的需要压缩的图片路径
				success: (image) => {
					that.width = image.width
					that.height = image.height
					const ctx = uni.createCanvasContext('camCacnvs',that);
					ctx.clearRect(0, 0, image.width, image.height)
					ctx.drawImage(image.path, 0, 0, image.width*0.9, image.height*0.9)
					ctx.draw()
					setTimeout(() => {
						uni.canvasToTempFilePath({
							x: 0,
							y: 0,
							width:image.width*0.9,
							height:image.height*0.9,
							destWidth:image.width*0.9,
							destHeight:image.height*0.9,
							canvasId: 'camCacnvs',
							fileType: 'png',
							quality: 0.6,
							success: function (res) {
								let url1 = res.tempFilePath
								//获取压缩后的图片大小kb进行判断
								uni.getFileInfo({
									filePath:res.tempFilePath,
									success: (res) => {
										console.log(res.size/1024+'k',url1)
										if(res.size/1024 < 130){
											//上传服务器
											if(that.submitFlag ) {
												that.submitFlag = false
												console.log(url1)
												uni.api.uploadImage1(that.frameNumber,'syr_qz',[url1]).then(data => {
													that.$emit('eSignSuccess',data)
													that.loading = false
													that.cancel()
													that.submitFlag = true
													uni.hideLoading()
												}).catch(err => {
													that.submitFlag = true
													that.loading = false
													uni.hideLoading()
												})
											}
											return false
										}else{
											that.zipImg(url1)
										}
									}
								})
							},
						},that)
					},300)	
				}
			})
		},
		//旋转
		rotateUp(url){
			let that = this
			uni.getImageInfo({
				src: url,
				success: function (image) {
					that.cw = image.width
					that.ch = image.height
					const ctx = uni.createCanvasContext('rotateCanvas',that);
					ctx.translate(0, image.width);
					ctx.rotate(-90 * Math.PI / 180)
					ctx.drawImage(url, 0, 0, image.width, image.height)
					ctx.draw()
					setTimeout(() => {
						uni.canvasToTempFilePath({
							x: 0,
							y: 0,
							canvasId: 'rotateCanvas',
							fileType: 'png',
							width:image.height,
							height:image.width,
							destWidth:image.height,
							destHeight:image.width ,
							success: function (res) {
								that.zipImg(res.tempFilePath)
								
							},
						},that)
					},300)		 
				}
			})
		}
	}
};
</script>

<style scoped lang="scss">
page {
	font-family: Source Han Sans CN;
}
.new_file {
	z-index: 100000;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	// transform: rotate(90deg);
	.buttONbOX {
		position: fixed;
		left: 50%;
		top: 50%;
	}
	.popupBox {
		position: fixed;
		left: 50%;
		bottom: 0;
		transform: translate(-50%, 0);
		width: 720upx;
		height: 100%;
		background: #ffffff;
		border-radius: 16upx;
		display: flex;
		align-items: center;
		.popupTopBox {
			width: 500upx;
			height: 80upx;
			background: #00aee7;
			// border-radius: 16upx 16upx 0px 0px;
			text-align: center;
			line-height: 80upx;
			font-size: 32upx;
			color: #ffffff;
			// float: right;
			position: absolute;
			top: 50%;
			right: -210upx;
			transform: rotate(90deg);
			
		}
		.mycanvas {
			width: 460upx;
			height: 80%;
			background: #ffffff;
			// box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.08);
			// margin-left: 80upx;
			// margin-right: 100upx;
			// margin-top: 100upx;
			// position: absolute;
			margin: auto;
			// bottom:50%;
			// left: 50%;
			// transform: translate(-50% -50%);
			// margin-bottom: 50upx;
			border: 1px dashed black;
		}
		.determineBtn1 {
			width: 200upx;
			height: 69upx;
			transform: rotate(90deg);
			position: absolute;
			top: 70%;
			right: 580upx;
			// background-color: #00aee7;
		}.determineBtn2 {
			width: 200upx;
			height: 69upx;
			transform: rotate(90deg);
			position: absolute;
			top: 50%;
			right: 580upx;
		}
		.determineBtn3{
			width: 200upx;
			height: 69upx;
			transform: rotate(90deg);
			position: absolute;
			top: 30%;
			right: 580upx;
			// background-color: #ff0000;
			// color: #fff;
		}	
		
	}
	.closeIcon {
		position: fixed;
		left: 50%;
		bottom: 92upx;
		transform: translate(-50%, 0);
	}
}
.canvsborder{

  border: 1rpx solid #333;

  position: fixed;

  top: 0;

  left: 10000rpx;
	background-color: #fff;
}
</style>