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

这篇具有很好参考价值的文章主要介绍了微信小程序使用canvas报：canvasToTempFilePath:fail executeCanvasMethod failed: Failed to execute ‘drawImage‘。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目场景：

问题描述

原因分析：

解决方案：

尝试1：

尝试2：

尝试过程：

项目场景：

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

技术：uniapp

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

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

微信小程序canvastotempfilepath,uniapp,微信小程序,小程序

问题描述

完整报错：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

微信小程序canvastotempfilepath,uniapp,微信小程序,小程序

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

尝试2：

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

尝试过程：

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

方法1：给canvas加上宽高

方法2：删除文件

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

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

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

等等....

觉得有帮助的话点个赞吧！文章来源地址https://www.toymoban.com/news/detail-713659.html

到了这里，关于微信小程序使用canvas报：canvasToTempFilePath:fail executeCanvasMethod failed: Failed to execute ‘drawImage‘的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！