在做一个签名的功能时,遇到的问题,签名后的画布需要转成图片,转成图片后,图片还要转base64,并且base64必须要很小(不能超过8kb),具体代码如下

uni.canvasToTempFilePath({
	fileType: 'jpg',
	canvasId: 'mycanvas',
	quality: 1,
	success: function(res) {
		console.log("第一个画布生成图片",res,res.tempFilePath)
		uni.getImageInfo({ //获取图片具体信息
			src: res.tempFilePath,  
			success: function(imageInfo){
				console.log("获取图片信息",imageInfo)
				var canvasWidth = imageInfo.width //图片原始长宽
				var canvasHeight = imageInfo.height
				let info = uni.createSelectorQuery().select(".agreement-mycanvas2");
				info.boundingClientRect(function(rects) { //获取第二个画布的宽高
				 console.log("位置信息",rects.width)  // 获取元素宽度
					var towidth = rects.width;  //第二个画布的宽
					var toheight = rects.height;  //第二个画布的高
					var ctx = uni.createCanvasContext('mycanvas2')
					ctx.drawImage(imageInfo.path, 0, 0, canvasWidth, canvasHeight,0,0,towidth,toheight)//等比写入第二个画布内
					ctx.draw(false, setTimeout(function(){ //给画布预留点画图片的时间
					     uni.canvasToTempFilePath({ //对第二个画布进行转图片处理
					         canvasId: 'mycanvas2',
							 fileType: 'jpg',
							 quality: 0.8,
					         success: function (canvas2) {
					            console.log("最终的图片",canvas2.tempFilePath)//最终图片路径
								uni.getFileSystemManager().readFile({ //对图片进行转base64存储
								  filePath: canvas2.tempFilePath, //选择图片返回的相对路径
								  encoding: 'base64', //编码格式
								  success: ress => { //成功的回调
								    console.log("base64数据:",'data:image/png;base64,'+ress.data)
								    uni.showToast({
								    	title: '完成',
								    	icon:'success',
								    	mask: true,
								    });
								  }
								})
					         },
					         fail: function (res) {
					            console.log(res.errMsg)
					        }
					    })
					},100))
				}).exec()
			}
		})
	} 
})

流程说明:在第一个画布内进行签名并且生成为jpg图片,然后对图片的宽高进行获取,并且获取一下第二个画布的宽高(我第二个画布设置的宽高为第一个画布的20%,所以要获取一下具体宽高值),然后将图片写入到第二个画布内,对第二个画布进行生成jpg图片,然后将图片信息转base64存储

原文链接:
uni-app小程序 画布转base64并且进行压缩

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐