2023-07-31 uniapp用canvas绘制图片时报错:getImageInfo:fail invalid 或者 errMsg: "getImageInfo:fail file not found" ==》图片加载失败,确认你使用的图片路径是否满足条件
methods: { drawPoster() { const ctx = uni.createCanvasContext('canvas', this); // 设置字体样式 ctx.setFontSize(20); ctx.setTextAlign('center'); ctx.setTextBaseline('middle'); // 设置文本颜色 ctx.setFillStyle('#000000'); // 绘制文本 ctx.fillText('这是一个海报', 100, 100); // 加载图片 uni.getImageInfo({ src: 'https://www.foodiesfeed.com/wp-content/uploads/2023/06/vegan-curry-with-fresh-herbs.jpg', success: function (res) { // 绘制图片 ctx.drawImage(res.path, 100, 100, 200, 200); // 绘制完成并将内容渲染到画布上 ctx.draw(); }, fail: function (err) { console.error('图片加载失败', err); } }); } }
问题是由uni.getImageInfo抛出的,原因是你所引用的图片路径没有满足一下条件才无法被加载所以才导致图片无法绘制从而不显示;
解决方案:
需要满足条件:
1.你用的图片路径为网络图片;
2.该网络图片路径域名已添加在小程序的白名单(downloadFile);
注:
如果已添加域名到download白名单,而开发者工具且没有显示可尝试重启;
我使用了本地图片也报图片加载失败。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧