uni-app手写签名并上传七牛云

创建canvas

<view class="signature">
	<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
	<view class="footer">
		<view class="footer-btn br" @click="close">关闭</view>
		<view class="footer-btn br c-orange" @click="clear">清除</view>
		<view class="footer-btn  c-blue" @click="finish">保存</view>
	</view>
</view>

手写签名并上传到七牛云 

export default {
		data() {
			return {
				//绘图图像
				ctx: '',
				//路径点集合
				points: [],
				//签名图片
				SignatureImg: '',
				// 画布是否有签名
				isClear: true,
			};
		},
		props: ['showCanvas'],
		mounted() {
			this.createCanvas();
		},
		watch: {
			showCanvas(val) {
				if (val === true) {
					this.createCanvas();
				}
			}
		},
		methods: {
			//创建并显示画布
			createCanvas() {
				this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
				//设置画笔样式
				this.ctx.lineWidth = 5;
				this.ctx.lineCap = 'round';
				this.ctx.lineJoin = 'round';
			},
			//触摸开始，获取到起点
			touchstart(e) {
				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) {
				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(); //绘制路径
				}
			},
			// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
			touchend() {
				this.points = [];
			},
			//绘制笔迹
			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);
				this.isClear = false;
			},
			//清空画布
			clear() {
				let that = this;
				that.isClear = true;
				uni.getSystemInfo({
					success: function(res) {
						let canvasw = res.windowWidth;
						let canvash = res.windowHeight;
						that.ctx.clearRect(0, 0, canvasw, canvash);
						that.ctx.draw(true);
					}
				});
			},
			//完成绘画并保存 -- 把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
			finish() {
				let that = this;
				if (that.isClear) {
					uni.showToast({
						title: "您还没有签名，请签名",
						icon: 'none',
						duration: 2000
					});
					return
				}
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					success: function(res) {
						that.SignatureImg = res.tempFilePath;
						that.getQiniuKey(res.tempFilePath)
					}
				}, );
			},
			// 保存的时候上传到七牛云
			async getQiniuKey(e) {

				let timestamp = new Date().getTime(); // 时间戳
				let signatureImgFile = base64ImgtoFile(e, timestamp); // 调用base64转图片方法
				let	key = `cndcare-files/testRef/${signatureImgFile.name}`;
				// 获取七牛云的token
				let upToken = await getUpTokenPtivate({
					suffixUrl: key
				});
                // 判断是否拿到token
				if (upToken.code !== 0) {
					uni.showToast({
						title: upToken.msg,
						icon: 'none',
						duration: 2000
					});
					return
				}

				// 上传扫七牛云
				uni.uploadFile({
					url: '七牛云接口',
					filePath: e,
					name: 'file',
					formData: {
						'key': key,
						'token': upToken.data,
					},
					success: (uploadFileRes) => {
						let uploadFileKey = JSON.parse(uploadFileRes.data).key;
						this.$emit('closeCanvas', e, uploadFileKey);
						this.clear();
					},
					fail: (err) => {
						uni.showToast({
							title: err.errMsg,
							icon: 'none',
							duration: 2000
						});
						console.log('fail', err);
					}
				});
			},
			// 关闭
			close() {
				this.$emit('closeSign');
			}
		},
	};