uni-app 微信小程序电子签名及签名图片翻转显示功能

文章目录

- 1. 需求背景
- 2. 开始撸
- - 2.1 点击重写进入签名页面（上图一）
  - 2.2 书写签名，点击确认返回，及图片翻转显示（上图二，三）
- 3. 图片进行翻转，返回翻转后的图片

1. 需求背景

接的一个开发一个小程序，需求很简单，使用uni-app实现一个微信小程序的电子签名功能请添加图片描述

2. 开始撸

2.1 点击重写进入签名页面（上图一）

在这里插入图片描述

<template>
	<view>
		<view class="ft-26 color-red mt-20 mb-20">
			本人承诺以上检查内容真实
		</view>
		<view class="sign">
			<view class="sign-header">
				<span><i class="color-red">*</i> 本人签名</span>
				<div @click="goSign">
					<img class="edit-icon" :src="require('@/static/images/edit.png')" alt="">
					<label for="">重写</label>
				</div>
			</view>
			<img class="sign-img" :src="tempFilePath">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tempFilePath: "",
			}
		},
		methods: {
			// 点击重写，进入签名页面
			goSign() {
				uni.navigateTo({
					url: `/examine/q-sign`
				})
			},
			// 签名页面返回回来，接收签名照片展示
			getTempFilePath(data) {
				let { tempFilePath } = JSON.parse(data)
				this.tempFilePath = tempFilePath
			},
		},
	}
</script>

<style lang="scss" scoped>
	.report-view {
		height: 50vh;
		background: #fff;
	}

	.popup-content {
		width: 100vw;
		height: 100vh;
	}

	.sign {
		border-radius: 10rpx;
		border: 1rpx solid #E6E6E6;
		overflow: hidden;

		.sign-header {
			line-height: 56rpx;
			background: #E8EFF8;
			border-radius: 0px;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;

			.edit-icon {
				width: 24rpx;
				height: 24rpx;
				display: inline-block;
				margin-right: 5rpx;
			}

			span {
				i {
					line-height: 56rpx;
					display: inline-block;
					margin-right: 10rpx;
				}
			}

			text {
				font-weight: 500;
				color: #999999;
			}
		}

		.sign-img {
			width: 100%;
			height: 300rpx;
			background: #fff;
		}
	}
</style>

2.2 书写签名，点击确认返回，及图片翻转显示（上图二，三）

在这里插入图片描述
完整代码

<template>
	<view>
		<!-- 自定义导航栏 -->
		<NaviBar title="签署" :autoBack="true" />
		<view class="wrapper">
			<view class="handBtn">
				<button @click="retDraw" class="delBtn">清除</button>
				<button @click="saveCanvasAsImg" class="saveBtn">取消</button>
				<button @click="subCanvas" class="subBtn">确认</button>
			</view>
			<view class="handCenter">
				<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
					@touchmove="uploadScaleMove" canvas-id="handWriting" />
				<!--用于旋转图片的canvas容器-->
				<canvas style="position: absolute" :style="{ width: cavWidth, height: cavWidth1 }"
					canvas-id="handWriting2"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Signature',
		data() {
			return {
				canvasName: 'handWriting',
				ctx: '',
				startX: null,
				startY: null,
				canvasWidth: 0,
				canvasHeight: 0,
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				canvas: null,
				cavWidth: 2000,
				cavWidth1: 2000,
				lineSize: 5, // 笔记倍数
			}
		},
		onLoad({
			location
		}) {
			if (location) {
				this.location = location;
			}
			this.ctx = uni.createCanvasContext('handWriting', this)
			this.$nextTick(() => {
				uni
					.createSelectorQuery()
					.select('.handCenter')
					.boundingClientRect((rect) => {
						this.canvasWidth = rect.width
						this.canvasHeight = rect.height
						/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
						this.setCanvasBg('#fff')
					})
					.exec()
			})
		},
		methods: {
			// 笔迹开始
			uploadScaleStart(e) {
				this.startX = e.changedTouches[0].x
				this.startY = e.changedTouches[0].y
				//设置画笔参数
				//画笔颜色
				this.ctx.setStrokeStyle(this.lineColor)
				//设置线条粗细
				this.ctx.setLineWidth(this.lineSize)
				//设置线条的结束端点样式
				this.ctx.setLineCap('round') //'butt'、'round'、'square'
				//开始画笔
				this.ctx.beginPath()
			},
			// 笔迹移动
			uploadScaleMove(e) {
				//取点
				let temX = e.changedTouches[0].x
				let temY = e.changedTouches[0].y
				//画线条
				this.ctx.moveTo(this.startX, this.startY)
				this.ctx.lineTo(temX, temY)
				this.ctx.stroke()
				this.startX = temX
				this.startY = temY
				this.ctx.draw(true)
			},
			/**
			 * 重写
			 */
			retDraw() {
				this.ctx.clearRect(0, 0, 700, 730)
				this.ctx.draw()
				//设置canvas背景
				this.setCanvasBg('#fff')
			},
			/**
			 * @param {Object} str
			 * @param {Object} color
			 * 选择颜色
			 */
			selectColorEvent(str, color) {
				this.selectColor = str
				this.lineColor = color
			},
			// 确认
			subCanvas() {
				const _this = this
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success(res) {
						console.log(res.tempFilePath, 'canvas生成图片地址')
						wx.getImageInfo({
							// 获取图片的信息
							src: res.tempFilePath,
							success: (res1) => {
								console.log(res1)
								// 将canvas1的内容复制到canvas2中
								let canvasContext = wx.createCanvasContext('handWriting2')
								let rate = res1.height / res1.width
								let width = 300 / rate
								let height = 300
								_this.cavWidth = 300 / rate
								_this.cavWidth1 = 300
								canvasContext.translate(height / 2, width / 2)
								canvasContext.rotate((270 * Math.PI) / 180)
								canvasContext.drawImage(res.tempFilePath, -width / 2, -height / 2,
									width, height)
								canvasContext.draw(false, () => {
									// 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中
									wx.canvasToTempFilePath({
										// 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。
										canvasId: 'handWriting2',
										fileType: 'png',
										quality: 1, //图片质量
										success(res2) {
											let data = JSON.stringify({
												tempFilePath: res2
													.tempFilePath,
											})
											let pages = getCurrentPages();
											let prevPage = pages[pages.length - 2];
											prevPage.$vm.getTempFilePath(data)
											uni.navigateBack({
												delta: 1
											})
										}
									})
								})
							}
						})
					},
				})
			},
			//旋转图片，生成新canvas实例
			rotate(cb) {
				const that = this
				wx.createSelectorQuery()
					.select('#handWriting2')
					.fields({
						node: true,
						size: true
					})
					.exec((res) => {
						const rotateCanvas = res[0].node
						const rotateCtx = rotateCanvas.getContext('2d')
						//this.ctxW-->所绘制canvas的width
						//this.ctxH -->所绘制canvas的height
						rotateCanvas.width = this.ctxH
						rotateCanvas.height = this.ctxW
						wx.canvasToTempFilePath({
							canvas: that.canvas,
							success(res) {
								const img = rotateCanvas.createImage()
								img.src = res.tempFilePath
								img.onload = function() {
									rotateCtx.translate(rotateCanvas.width / 2,
										rotateCanvas
										.height / 2)
									rotateCtx.rotate((270 * Math.PI) / 180)
									rotateCtx.drawImage(img, -rotateCanvas.height / 2, -
										rotateCanvas
										.width / 2)
									rotateCtx.scale(that.pixelRatio, that.pixelRatio)
									cb(rotateCanvas)
								}
							},
							fail(err) {
								console.log(err)
							}
						})
					})
			},
			//取消
			saveCanvasAsImg() {
				this.retDraw()
				uni.navigateBack()
			},
			//设置canvas背景色  不设置  导出的canvas的背景为透明
			//@params：字符串  color
			setCanvasBg(color) {
				/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
				//rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
				//这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写
				this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4)
				// ctx.setFillStyle('red')
				this.ctx.setFillStyle(color)
				this.ctx.fill() //设置填充
				this.ctx.draw() //开画
			},
			toJSON() {}
		}
	}
</script>

<style>
	page {
		background: #fbfbfb;
		height: auto;
		overflow: hidden;
	}

	.wrapper {
		position: relative;
		width: 100%;
		height: 100vh;
		margin: 20rpx 0;
		overflow: auto;
		display: flex;
		align-content: center;
		flex-direction: row;
		justify-content: center;
		font-size: 28rpx;
	}

	.handWriting {
		background: #fff;
		width: 100%;
		height: 100vh;
	}

	.handCenter {
		border-left: 2rpx solid #e9e9e9;
		flex: 5;
		overflow: hidden;
		box-sizing: border-box;
	}

	.handBtn button {
		font-size: 28rpx;
	}

	.handBtn {
		height: 100vh;
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		align-content: space-between;
		flex: 1;
	}

	.delBtn {
		width: 200rpx;
		position: absolute;
		bottom: 350rpx;
		left: -35rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.subBtn {
		width: 200rpx;
		position: absolute;
		bottom: 52rpx;
		left: -35rpx;
		display: inline-flex;
		transform: rotate(90deg);
		background: #29cea0;
		color: #fff;
		margin-bottom: 60rpx;
		text-align: center;
		justify-content: center;
	}

	/*Peach - 新增 - 保存*/

	.saveBtn {
		width: 200rpx;
		position: absolute;
		bottom: 590rpx;
		left: -35rpx;
		transform: rotate(90deg);
		color: #666;
	}
</style>