uniapp中canvas绘制图片内容空白报错原因总结

uniapp中canvas绘制图片内容空白报错原因总结，看完需要10分钟

问题图: 

 

 效果图：

 

目录

 首先定义画布canvas

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

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

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

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

---

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

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

把照片URL拿到，

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

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

 首先定义画布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)
			})());

 万能代码，不能用你回来找我，能用可以双击点赞评论666