uniapp实现手写签名

1.主要功能有横屏展示签名、清空、撤销、保存、判断是否有签

上代码！！！

撤销操作的核心代码

// 每次触摸开始，调用uniapp内置的uni.canvasGetImageData将当前画布进行保存
			uni.canvasGetImageData(
				{
					canvasId: 'mycanvas',
					x: 0,
					y: 0,
					width: this.screenWidth,
					height: this.screenHeight,
					success: (res) => {
						// console.log(res.data instanceof Uint8ClampedArray); // true
                        // 将返回的data存在栈中，后续用来清除
						this.paths.push(res.data);
					},
				},
                // *-*-*-*-*-*-此处必须加this-*-*-*-*-*-*
				this,
			);

 // 回退的操作其实就是将之前存在栈中的绘画路径删除最后一项
				const imgData = this.paths.pop();
                //删除之后执行uni.canvasPutImageData重新绘制canvas
				uni.canvasPutImageData(
					{
						canvasId: 'mycanvas',
						x: 0,
						y: 0,
						width: this.screenWidth,
						height: this.screenHeight,
						data: imgData,
						success: (res) => {
                            // 每后退一步，将存起来的点删除最后一个
							this.tempPoint.pop();
						},
					},
                    // *-*-*-*-*-*-此处必须加this-*-*-*-*-*-*
					this,
				);

在pages.json中添加以下配置，禁止手机横屏旋转

"pageOrientation": "portrait"

 

贴上完整版代码，可直接使用，具体api参数参考uni.canvasGetImageData(OBJECT,this) | uni-app官网