uni-app判断canvas画图是否为空以及报toJSON错误的解决

最近完成一个需求是签名页判断是否签名未签名不能点击确定

看了网上的一些教程大致思路是把canvas画图触发事件生成图片base 然后进行原始canvas。todataurl方法比对格式大小，

代码：


//验证canvas画布是否为空
function isCanvasBlank(canvas) {
    var blank = document.createElement('canvas');//系统获取一个空canvas对象
    blank.width = canvas.width;
    blank.height = canvas.height;
    return canvas.toDataURL() == blank.toDataURL();//比较值相等则为空
}
//调用
//非空验证
function checkEmpty() {
    var c=document.getElementById("canvas"); // 获取html的canvas对象
    if(isCanvasBlank(c)){
        alert("请绘制");
        return;
    }
});

但是后来我操作了canvas.todataurl不知道为什么方法不执行，然后我就换了一个思路

判断canvas画图事件触发利用立flag判断画布是否为空具体代码如下

代码：

 methods: {
            /*点击确认*/
            async sure() {
				// 判断是否签名 未签名return不发送请求
				if(!this.$refs.drawing_board.flag) {
					return uni.showToast({ //未签字提示
						title: '请签字确认',
						duration: 2000,
						icon: 'error'
					});
				return
				}
                let path = await this.$refs.drawing_board.canvas2img();
                uni.$emit('getSignImg',{path});
                uni.navigateBack()
            },
            /*清空画布*/
            cancel(){
                this.$refs.drawing_board.clearRect();
            }
        }

// 解决打开页面报toJSON错误问题
			toJSON() {},
			/*划线*/
			drawPoint(e) {
				this.flag= true     //只要执行划线事件更改flag状态从而判断是否画布为空
				let x = e.changedTouches[0].x;
				let y = e.changedTouches[0].y;
				let s_point = [x, y];


				// uniCanvas.drawCircle(
				//     this.ctx,  [x,y],2,0,360,true, '#000'
				// )

				if (this.s_point) {
					this.ctx.fillLine(
						[{
							width: 2,
							color: '#000',
							start_point: this.s_point,
							end_point: s_point,
						}])
				}
				this.s_point = s_point;

			},

这里随便说一下uni-app有时候进入canvas画图页面时就会报toJSON错误

这里只要在报错的页面methods：{ toJSON() {} }里面添加这个方法就不报错了

这里只是一种思路，具体解决方式还有很多，也希望大家和我一起探讨

uni-app判断canvas画图是否为空以及报toJSON错误的解决

猜你喜欢