脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → uniapp canvas绘制图片内容空白

uniapp中canvas绘制图片内容空白报错的原因及解决

 更新时间：2023年09月17日 10:26:05   作者：痴心阿文  
最近有个需求就是要用canvas画个分享的海报,所以这里总结下,这篇文章主要给大家介绍了关于uniapp中canvas绘制图片内容空白报错的原因及解决方法,需要的朋友可以参考下

问题图: 

效果图：

Canvas绘制图片流程

简单说一下canvas上绘制图片的过程

🧨先调用相机接口拍摄照片，

🧨把照片URL拿到，

🧨然后获取照片URL信息宽高，

🧨把宽高给画布，🧨使用canvas的drawImage API把图片绘制到canvas上，🧨绘制方法执行完成后把这个canvas导出为图片，并上传到服务器，至此流程结束。

首先定义画布canvas

<canvas class="canvas" canvas-id="canvas"
				:style="{ height: canvasHeight + 'px', width: canvasWidth + 'px'  }"></canvas>

1.画布的大小大于了图片的大小导致了生成的内容是空白的

canvas画布初始值没有，导致没有绘制成功

解决：

 //默认初始值   canvasWidth1  canvasHeight1
data() {
        return {
			ctx: null,
			canvasWidth: 1080,
			canvasHeight: 1440,
        }
    },

2.绘制图片没有放到wx.draw方法里面

wx.draw(false, () =>{
  wx.canvasToTempFilePath({
       x: 0,
       y: 0,
       canvasId: 'shareCanvas',  // shareCanvas 为制定 绘图canvas 的ID
       success: (res) => {
            this.storeImgPath = res.tempFilePath
            ....写入生成完成的逻辑
       },
      complete: (res) => {
           wx.hideLoading()
       }
  })
})

3.Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.

报错信息

 canvas无法执行toDataURL方法，受污染的画布无法输出

 受限于CORS 策略，会存在跨域问题，页面虽然可以使用跨域的图片（比如使用img标签或者append到页面上），因为浏览器本身不会有跨域问题，但是一旦绘制到canvas上就会污染这个canvas，导致无法提取到这个canvas的数据，也就无法输出了。

上面的都加了还存在，必杀技，延迟方法：

//万能代码，不能用你回来找我，能用可以双击点赞评论666	
console.log('正在绘制')
			this.ctx.draw(false,(()=> {
				setTimeout(() => {
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: this.canvasWidth1,
					height: this.canvasHeight1,
					destWidth: this.canvasWidth1,
					destHeight: this.canvasHeight1,
					canvasId: 'myCanvas',quality:0.6,
					success: res => {
						// 在H5平台下，tempFilePath 为 base64
						console.log(res,'绘制完成===',)
						//上传
						uni.uploadFile({
							url: url, //仅为示例，非真实的接口地址
							filePath:res.tempFilePath,
							header: {
								'token': self.$store.state.token,"version":"100.0.00"
							},
							name: 'file',
							formData: {},
							success: (uploadFileRes) => {
								console.log('uploadFileRes===1111',uploadFileRes)
								uni.hideLoading()
							},
							fail(err) {
								console.log(err)
								uni.hideLoading()
							}
						});
					//	this.pictureArr.push(res.tempFilePath);
					},
					fail(err) {
						console.log(err)
						uni.showToast({
							title:'上传图片失败!',icon:'none',
							duration: 3000
						})
						uni.hideLoading()
					}
				}, this)
				}, 3500)
			})());

万能代码，不能用你回来找我

总结

到此这篇关于uniapp中canvas绘制图片内容空白报错的原因及解决的文章就介绍到这了,更多相关uniapp canvas绘制图片内容空白内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论