uniapp通过canvas画布，签名保存，并上传到数据库

参考博客：uniapp canvas实现手写签名并保存

HTML：

		<!-- 签名 -->
		<view class="container" >  
			<view class="content-box">
				<button class="button" @click="initCanvas" v-show="!showCanvas" size="mini" type="primary">点击签名</button>
				<view v-show='showCanvas'>
				    <canvas class='mycanvas' canvas-id="mycanvas" 
						@touchmove='move' @touchstart='start($event)' @touchend='end'
						@touchcancel='cancel' @longtap='tap' @error='error' disable-scroll='true'>
				    </canvas>
				    <view class="footer">
						<button class="right" @click="clearClick" size="mini" type="primary">清除</button>
						<button class="close" @click="close" size="mini" type="primary">关闭</button>
				    </view>
				</view>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view style="margin-top:38upx;">
			<button type="primary" @click="submit">提交</button>
		</view>

script：

<script>
	import axios from 'axios';
	import utils from '../../common/utils.js';
	// 画布
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	var _that;
	// 获取系统信息
	uni.getSystemInfo({
	    success: function(res) {
	        canvasw = res.windowWidth;
	        canvash = res.windowHeight;
	        },
		});
	    export default {
			data() {
				return {
					bookList: [],	//告知书文本信息
					username: '',
					title:'',
					title_id:'',
					url_id:'',	//告知书id
					//填入的数据
					answers:[],
					answerInputItem:[],
					answerCheckItem:[],
					//画布
					showCanvas:false,
					signImage: '',
					isEnd: false ,// 是否签名
				}
			},
			onLoad() {
				// 获得Canvas的上下文
				content = wx.createCanvasContext('mycanvas')
				// 设置线的颜色
				content.setStrokeStyle("#000")
				// 设置线的宽度
				content.setLineWidth(5)
				// 设置线两端端点样式更加圆润
				content.setLineCap('round')
				// 设置两条线连接处更加圆润
				content.setLineJoin('round')
			},
			methods: {
				//点击“提交”按钮
				submit:function(){
					//提交签名
					var _this = this;
					if (this.isEnd) {
						uni.canvasToTempFilePath({
							canvasId: 'mycanvas',
							success: function(res) {
								// base64转blob
								var blob = _that.dataURItoBlob(res.tempFilePath);
								//提交签名
								const axios = require('axios');
								let data = new FormData();
								data.append('type',parseInt(_this.url_id)); 
								data.append('title',_this.title_id); 
								data.append('signature',res.tempFilePath); 
								data.append('id_card','444444202009090000'); 
								data.append('signature_time','2020-09-09 12:00:00'); 
								data.append('create_user',201621177059); 
								axios.post(utils.baseUrl + 'archive/SignatureView/',data).then(function(response) {
									if(response.data.code == 200){
										uni.showToast({
											title: '提交成功',
											duration: 1500,
											mask: true
										})
										// console.log('提交成功')
									}else{
										console.log(response.data)
										uni.showToast({
											title: '提交失败，请重试',
											icon: "none",
											duration: 1500,
											mask: true
										})
									}
								})	
								// 打印图片路径
								// console.log(res.tempFilePath) //base64
								console.log('完成签名')
								// 设置图片
								_that.signImage = res.tempFilePath
							}
						})
					} else {
						uni.showToast({
							title: '请先完成签名',
							icon: "none",
							duration: 1500,
							mask: true
						})
					}	
				},
				// base64 to blob二进制
			dataURItoBlob: function(dataURI){
				var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型
				var byteString = atob(dataURI.split(',')[1]); //base64 解码
				var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
				var intArray = new Uint8Array(arrayBuffer); //创建视图
				for (var i = 0; i < byteString.length; i++) {
					intArray[i] = byteString.charCodeAt(i);
				}
				return new Blob([intArray], {type: mimeString});
			},
			// blob二进制 to base64
			blobToDataURI: function(blob, callback){
				var reader = new FileReader();
				reader.onload = function (e) {
					callback(e.target.result);
				}
				reader.readAsDataURL(blob);
			},
			// 显示画布
			initCanvas:function() {
				this.showCanvas = true;
			},
			// 关闭画布
			close:function() {
				this.showCanvas = false;
				content.clearRect(0, 0, canvasw, canvash)
				content.draw(true)
			},
			
			// 画布的触摸移动开始手势响应
			start: function(event) {
				// console.log(event)
				// console.log("触摸开始" + event.changedTouches[0].x)
				// console.log("触摸开始" + event.changedTouches[0].y)
				// 获取触摸开始的 x,y
				let point = {
					x: event.changedTouches[0].x,
					y: event.changedTouches[0].y
				}
				// console.log(point)
				touchs.push(point);
			},
			// 画布的触摸移动手势响应
			move: function(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				// console.log(point)
				touchs.push(point)
				if (touchs.length >= 2) {
					this.draw(touchs)
				}
			},
			// 画布的触摸移动结束手势响应
			end: function(e) {
				console.log("触摸结束" + e)
				// 设置为已经签名
				this.isEnd = true
				// 清空轨迹数组
				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) {
				// console.log(touchs[0],touchs[1])
				let point1 = touchs[0]
				let point2 = touchs[1]
				touchs.shift()
				content.moveTo(point1.x, point1.y)
				content.lineTo(point2.x, point2.y)
				content.stroke()
				content.draw(true)
			},
			// 清除操作
			clearClick: function() {
				// 设置为未签名
				this.isEnd = false
				// 清除画布
				content.clearRect(0, 0, canvasw, canvash)
				content.draw(true)
			},
		}
	})

style:

/* 画布 */
.button{
	display: table;
	background-color: #149615;
}
.mycanvas{
	box-shadow: inset 0 0 10px black;
	width: 100%;
	margin: 0.5rem 0;
}
.left{
	background-color: #14b50e;
}
.right{
	background-color: #da0606
}
.close{
	background-color: #447b73;
}
.footer{
	display: flex;
}