微信小程序使用canvas报：canvasToTempFilePath:fail executeCanvasMethod failed: Failed to execute ‘drawImage‘

目录

项目场景：

问题描述

原因分析：

解决方案：

尝试1：

尝试2：

尝试过程：

---

项目场景：

使用微信小程序的api进行canvas绘制海报或者二维码

技术：uniapp

版本：3.0.0（3.0.1也可以，低版本没有试过）

需求：点击后弹出个人二维码

---

问题描述

完整报错：canvasToTempFilePath:fail executeCanvasMethod failed: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

---

原因分析：

这个二维码是通过一个依赖将文本生成base64图片格式，在通过另一个依赖进行转换为临时路径（两个依赖会放到下一篇博客讲感兴趣的话可以看看）通过uniapp的drawImage进行绘制图片接着就报错了，进行排查发现跟它一点关系都没有，将
draw注释掉后好了，不报错了，我就知道我的canvas是没有任何问题的，因为draw就是绘制到画布上的，不可能会报错，那么问题最大可能就是出在了二维码或者html上了

---

解决方案：

尝试1：

将生成二维码的依赖更换成了：uQRCode，直接画出去二维码，但就是很快就不行了，因为二维码会覆盖，（解决方法：.restore();跟save()）一个回复之前的画布，一个保存当前画布，当然了draw也行给个true

但是这跟我的想法不太符合，于是就有了2

尝试2：

我的渲染是放在methods里面的，但是canvas是放Uview的u-popup里面的，单独放没有问题，但是加上v-if后就直接报错了，替换成v-show后变成了时不时的报错，最后没办法将组件舍去自己手写了样式，加上了visibility：hidden，点击事件的时候动态切换类，至此问题解决！！

尝试过程：

在解决这个报错的途中也找了不少的文章但是他们的方法都没有什么效果

方法1：给canvas加上宽高

方法2：删除文件

方法3：渲染的时候加上个定时器

方法4：解密微信返回的临时路径

方法5：将canvas的导出并赋给一个image

等等....

觉得有帮助的话点个赞吧！