uniapp user signature

Table of contents

 The first chapter uses the API of uniapp

1.1 uni.createCanvasContext(canvasId, this)

1.2 uni.getSystemInfo()

 1.3 uni.canvasToTempFilePath(object, component)

 1.4 uni.uploadFile(object)

Chapter Two Concrete Steps

2.1 The first step: signature structure

2.2 The second step: signature style

2.3 The third step: signature logic

2.3.1 Description of the method used

2.3.2 Complete code involving logic

uniapp common api: uniapp common api_❆VE❆'s Blog-CSDN Blog

Other APIs involved: uni.createCanvasContext(canvasId, this) | uni-app official website

 The first chapter uses the API of uniapp

1.1 uni.createCanvasContext(canvasId, this)

The canvasId needs to be specified, and the drawing context only applies to the corresponding <canvas/

<canvas canvas-id="mycanvas"></canvas>

this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象

1.2 uni.getSystemInfo()

API to obtain system information

The concept of system information | uni-app official website

uni.getSystemInfo({
   	success: function(res) { //调用成功返回的数据
		console.log(res);
	},  
});

 1.3 uni.canvasToTempFilePath(object, component)

Export the contents of the specified area of ​​the current canvas to generate a picture of the specified size, and return the file path. Under the custom component, the second parameter is passed to the custom component instance

uni.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
  canvasId: 'myCanvas',
  success: function(res) {
    // 在H5平台下，tempFilePath 为 base64
    // 在H5平台下，tempFilePath 为 临时路径
    console.log(res.tempFilePath)
  } 
})

 uni.canvasToTempFilePath(object, component) | uni-app official website

 1.4 uni.uploadFile(object)

Upload local resources to the developer server, and the client initiates a  POST request, which  content-type is multipart/form-data

uni.uploadFile(OBJECT) | uni-app official website

uni.uploadFile({
    url: "后端传的路径",
	filePath: tempFilePath,
	formData: { //需要上传的额外的formData数据
		appid: '',
		timestamp: timestamp,
	},
	name:'file',  //文件对应的 key：file,img……
	header:{ //携带的请求头
		token: uni.getStorageSync('userToken')
	},
	success: function(res){
		// 成功回调
		console.log("成功",res.data)
	},
	fail: err => {
		// 失败回调
		console.log("失败",err)
	}
})

Chapter Two Concrete Steps

2.1 The first step: signature structure

<view class="container">
	<view class="sigh-btns">
		<view class="btn" @tap="handleCancel">取消</view>
		<view class="btn" @tap="handleReset">重置</view>
		<view class="btn" @tap="handleConfirm">确认</view>
	</view>
	<view class="sign-box">
		<canvas class="mycanvas" :style="{width:width +'px',height:height +'px'}" canvas-id="mycanvas" 
        @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
	</view>
</view>

2.2 The second step: signature style

.container {
	width: 100%;
	height: 100%;
	background-color: #fff;
}		 
.sign-box {
	width: 750rpx;
	height: 100%;
}		 
.sign-view {
    height: 100%;
}		 
.sigh-btns {
	position: fixed;
	right: 32rpx;
	bottom: 64rpx;
	z-index: 2000;
	width: 540rpx;
	margin: auto;
}		 
.btn {
	display: inline-block;
	width: 160rpx;
	height: 80rpx;
	line-height: 80rpx;
	background-image: linear-gradient(right,#5C77FF,#2D4ADC);
	color: #fff;
	margin-right: 20rpx;
	text-align: center;
	border-radius: 8rpx;
	font-size: 32rpx;
}		 
.mycanvas {
	width: 100%;
	height: 100%;
	background-color: #fff;
}		 
.canvsborder {
    border: 1rpx solid #333;
}

2.3 The third step: signature logic

2.3.1 Description of the method used

• touchstart()----handwriting触摸开始，获取到起点
• touchmove()----handwriting触摸移动，获取到过程中的路径点
• touchend（）----  触摸结束，将未绘制的点清空防止对后续路径产生干扰
• beginPath() ---- Start to create a path, you have to write it in the touchstart method
• moveTo()----Move the path to the specified point in the canvas without creating a line
• lineTo()----Add a new point, and then create a line from the last specified point to the target point
• stroke() ---- This method is used to draw lines
• draw()---- Draw the description (path, deformation, style--code logic) in the drawing context to the canvas
• clearRect() ---- clears the canvas

uniapp drawing api: https://uniapp.dcloud.net.cn/api/canvas/CanvasContext.html

2.3.2 Complete code involving logic

    var x = 20;
	var y = 20;
	var tempPoint = []; //用来存放当前画纸上的轨迹点
	var id = 0;
	var type = '';
	let that;
	let canvasw;
	let canvash;
	export default {
		name: '',
		data() {
			return {
				ctx: '', //绘图图像
				points: [], //路径点集合,
				width: 0,
				height: 0,
			};
		},
		onLoad(options) {
			that = this;
			this.query = options
			this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
			//设置画笔样式
			this.ctx.lineWidth = 4;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';

			uni.getSystemInfo({
				success: function(res) {
					console.log(res);
					that.width = res.windowWidth;
					that.height = res.windowHeight*0.9;
				}
			});
		},
		methods: {
			//触摸开始，获取到起点
			touchstart: function(e) {
				let startX = e.changedTouches[0].x;
				let startY = e.changedTouches[0].y;
				let startPoint = {
					X: startX,
					Y: startY
				};

			/* **************************************************
			 #由于uni对canvas的实现有所不同，这里需要把起点存起来
			***************************************************/
				this.points.push(startPoint);
				//每次触摸开始，开启新的路径
				this.ctx.beginPath();
			},
			//触摸移动，获取到路径点
			touchmove: function(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(); //绘制路径
				}
				tempPoint.push(movePoint);
			},
			// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
			touchend: function() {
				this.points = [];
			},
			/* ***********************************************	
			#   绘制笔迹
			#   1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
			#   2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
			#   3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
			************************************************ */
			draw: function() {
				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);
			},
			handleCancel() {
				uni.navigateBack({
					delta: 1
				});
			},
			//清空画布
			handleReset: function() {
				console.log('handleReset');
				that.ctx.clearRect(0, 0, that.width, that.height);
				that.ctx.draw(true);
				tempPoint = [];
			},
			//将签名笔迹上传到服务器，并将返回来的地址存到本地
			handleConfirm: function() {
				let that = this
				if (tempPoint.length == 0) {
					uni.showToast({
						title: '请先签名',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				uni.canvasToTempFilePath({
					width: that.width,
					height: that.height,
					canvasId: 'mycanvas',
					fileType: 'png',
					quality: 1, //图片质量
					success: function(res) {
						let tempPath = res.tempFilePath;
						//发送请求 -->很重要的一个函数，前面都是我们前端自己的操作
                        //到这一步就是我们与后端对接了，看懂这个函数很重要哦
						that.uploadSignature(tempPath)
					}
				});
			},
			uploadSignature(tempFilePath) {
				// 生成签名-->可以做额外操作，加密之类的……
				let timestamp = new Date().getTime();
				// 上传文件
				uni.uploadFile({
					url: “该路径很重要，你必须填后台给你的完整路径”
					filePath: tempFilePath, //该路径是你调用的方法所返回的临时路径/base64……
					name:'file',
					header:{  //需要携带请求头吗
						token: uni.getStorageSync('userToken')
					},
					success: function(res){
						// 成功回调 -- 返回的res打印出来，查看后台给你返回的路径是什么即可
						console.log("成功",res)
						uni.setStorageSync('signature',res.data)
					},
					fail: err => {
						// 失败回调
						console.log("失败",err)
					}
				})
			}
		},
	}