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

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

问题图:

效果图：

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)
            })());

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