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

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

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

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

解决：

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

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

wx.draw(false, () =>{wx.canvasToTempFilePath({x: 0,y: 0,canvasId: 'shareCanvas',  // shareCanvas 为制定 绘图canvas 的IDsuccess: (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 为 base64console.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