uni开发手写板功能 弹框 完整代码 舒适应用!!!

成品展示如上图所示

首先在项目的componts文件夹里引入cc-signature.vue

```javascript
<template>
	<view v-if="canvasVisiable">
		<view class="canvas-container">
			<canvas canvas-id="canvas" id="canvas" :disable-scroll="true" style="width: 100%; height: 200px;background-color: #FFFFFF;"
				@touchstart="handleTouchStart($event)" @touchmove="handleTouchMove($event)" @touchend="handleTouchEnd($event)"
				@touchcancel="handleEnd($event)"></canvas>
		</view>
		<view class="btn-container">
			<button @click="reset()">重置</button>
			<button @click="handleConfirm()">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			canvasVisiable: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				context: '',
				canvasData: []
			};
		},
		watch: {
			canvasVisiable() {
				this.context = uni.createCanvasContext('canvas');
				this.context.setLineWidth(3);
				this.context.setStrokeStyle("#000000");
				this.reset()
			},
			canvasData() {
				if(!this.canvasData.length){
					return
				}
				this.context.moveTo(this.canvasData[0].x, this.canvasData[0].y)
				for (let i = 0; i < this.canvasData.length; i++) {
					this.context.lineTo(this.canvasData[i].x, this.canvasData[i].y)
				}
				this.context.stroke()
				this.context.draw(true)
			}
		},
		methods: {
			reset() {
				this.context.draw()
				this.canvasData = []
			},
			hideModal() {
				this.$emit('update:dialogVisiable', false)
			},
			handleTouchStart(e) {
				console.log(e)
				this.canvasData = []
				const a = e.changedTouches[0]
				this.canvasData.push({
					x: a.x,
					y: a.y
				})
			},
			handleTouchMove(e) {
				const a = e.changedTouches[0]
				this.canvasData.push({
					x: a.x,
					y: a.y
				})
			},
			handleTouchEnd(e) {
				const a = e.changedTouches[0]
				this.canvasData.push({
					x: a.x,
					y: a.y
				})
			},
			handleEnd() {
				this.context.stroke()
				this.context.draw(true)
			},
			handleConfirm() {
				if(this.canvasData.length>0){
					uni.canvasToTempFilePath({
						canvasId: 'canvas',
						success: res => {
							this.$emit('success', res.tempFilePath)
						}
					})
				}else{
					uni.showToast({
						title: "请签字",
						icon: 'none',
						duration:1500
					});
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.canvas-container {
		width: 100%;
	}
	.btn-container {
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-around;
	}
</style>

之后在全局mian.js引入

//  画板
import signature from './components/cc-signature/cc-signature.vue'
Vue.component('signature',signature)
Vue.config.productionTip = false

之后在我们使用的页面里载入

<!-- 画布弹框 -->
		<uni-popup ref="signaturePopup" type="center" :custom="true" @change="closeSignature">
			<view class="signature-popup" :style="{ width: winWidth }">
				<view class="head">
					<view class="btn-close" @tap="hideSignature"><i class="iconfont iconweibiao45133"></i></view>
					签名
				</view>
				<view class="content"><signature :canvasVisiable="isShowSignature" @success="getImgs"></signature></view>
			</view>
		</uni-popup>

之后我们再加上弹框样式

.signature-popup {
		background-color: @bc-color;
		.head {
			position: relative;
			line-height: 44px;
			border-bottom: 1px solid @border-color;
			text-align: center;
			font-size: @fontSize;
			.btn-close {
				position: absolute;
				right: 0;
				top: 0;
				width: 44px;
				line-height: 44px;
				text-align: center;
			}
		}
	}

在页面需要用到的地方 用一个图片标签来接受

<!--  检查 -->
				<view class="uni-list-cell">
					<view class="uni-list-cell-navigate " @tap.stop="showSignature()">
						<view class="label label-check">检查人（签字）</view>
						<view class="content"><image v-if="signatureImg" :src="imgSrc" mode=""></image></view>
					</view>
				</view>

在data里定义的

//  画布
			signatureImg: '',
			//  控制显示和隐藏
			isShowSignature: false, //是否显示画布
			imgSrc: '',
			signaturePopup: false, //是否显示画布popup
			winWidth: '' // 这个是适应屏幕宽度的

//在onload里写的
onLoad() {
		this.winWidth = this.$SystemInfo.windowWidth - 30 + 'px';
	},

方法的话就是控制与隐藏 没有太大的变化 只是当我们用画布获取到的图片是base64的 所以我们需要转码

	// 显示弹窗
		showSignature() {
			var _self = this;
			this.$refs.signaturePopup.open();
			setTimeout(function() {
				_self.isShowSignature = true;
			}, 1);
		},
		// 隐藏弹窗
		hideSignature() {
			this.isShowSignature = false;
			this.$refs.signaturePopup.close();
		},
		closeSignature(res) {
			if (!res.show) {
				this.isShowSignature = false;
			}
		},
		getImgs(e) {
			this.hideSignature();
			this.signatureImg = e;
			let file = e; // 把整个base64给file
			var type = 'image/png'; // 定义图片类型（canvas转的图片一般都是png，也可以指定其他类型）
			let conversions = this.base64ToBlob(file, type); // 调用base64转图片方法
			this.imgSrc = URL.createObjectURL(conversions);
			console.log(this.imgSrc);
		},

转码方式

		getImgs(e) {
			this.hideSignature();
			this.signatureImg = e;
			let file = e; // 把整个base64给file
			var type = 'image/png'; // 定义图片类型（canvas转的图片一般都是png，也可以指定其他类型）
			let conversions = this.base64ToBlob(file, type); // 调用base64转图片方法
			this.imgSrc = URL.createObjectURL(conversions);
			console.log(this.imgSrc);
		},



	base64ToBlob: function(urlData, type) {
			let arr = urlData.split(',');
			let mime = arr[0].match(/:(.*?);/)[1] || type;
			// 去掉url的头，并转化为byte
			let bytes = window.atob(arr[1]);
			// 处理异常,将ascii码小于0的转换为大于0
			let ab = new ArrayBuffer(bytes.length);
			// 生成视图（直接针对内存）：8位无符号整数，长度1个字节
			let ia = new Uint8Array(ab);
			for (let i = 0; i < bytes.length; i++) {
				ia[i] = bytes.charCodeAt(i);
			}
			return new Blob([ab], {
				type: mime
			});
		}

这是完整的一套签名体系 亲测没有任何bug 我们获取到的blob地址 发给后台处理即可 如有使用的小伙伴不懂得直接评论区留言 看到即回复