当前位置:   article > 正文

uniapp:微信小程序uni.canvasToTempFilePath(),报错:canvasToTempFilePath: fail canvas is empty

uni.canvastotempfilepath

错误原因:
生成海报为了方便调用,将canvas封装在了子组件中。
绘制完海报后,调用uni.canvasToTempFilePath()保存canvas为图片会提示错误信息:canvasToTempFilePath: fail canvas is empty
通过百度了解,在微信小程序子组件中调用canvasToTempFilePath时,需要额外增加一个this
uni.canvasToTempFilePath(object, component,this)

ctx.draw(true, (ret) => { // draw方法 把以上内容画到 canvas 中。
	setTimeout(()=>{
		uni.canvasToTempFilePath({ // 保存canvas为图片
			canvasId: 'myCanvas',
			quality: 1,
			width:this.canvasW,
			height:this.canvasH,
			destWidth:this.canvasW,
			destHeight:this.canvasH,
			complete: (res)=> {
				// 在H5平台下,tempFilePath 为 base64, 
				// 图片提示跨域 H5保存base64失败,APP端正常输出临时路径
				if(res.tempFilePath){
					// 小程序中,将res.tempFilePath转为base64,并保存图片
					uni.getFileSystemManager().readFile({ 
						filePath: res.tempFilePath,
						encoding: 'base64',
						success: res => {
							let base64 = 'data:image/png;base64,' + res.data;
							this.$http.post("Users/base64_upload", {
								image: base64
							}).then(res => {
								if (res.code == 200) {
									uni.showToast({
										icon: 'success',
										mask: true,
										title: '完成',
									});
									this.ewm = this.$imgUrl+res.data;
								}
							})
						}
					})
				}
			},
		},this) // 这里是新增的this,只有在微信小程序中需要加入,不然会报错
	},1000)
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/644263
推荐阅读
相关标签
  

闽ICP备14008679号