微信小程序canvas绘制图片真机不显示问题

最新推荐文章于 2025-01-09 10:14:02 发布

Misnice

最新推荐文章于 2025-01-09 10:14:02 发布

阅读量4.6k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/Misnice/article/details/103148731

版权

微信小程序专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种解决在使用canvas绘制图片时，模拟器上可以正常显示但真机无法显示的问题的方法。通过使用wx.getImageInfo将网络图片转换为本地路径，实现了在真机上的正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用canvas绘制图片的时候，模拟器上正常显示，真机上不显示

const ctx = wx.createCanvasContext('canvasImg');
var imgUrl = 'https://static.bzsh.souqu.net/20191119095703c82818277.png';
ctx.drawImage(imgUrl, 40, 100, 200, 200);
ctx.draw();

用 wx.getImageInfo 将网络图片转成本地路径，在真机就能正常显示了

const ctx = wx.createCanvasContext('canvasImg') 
var imgUrl = 'https://static.bzsh.souqu.net/20191119095703c82818277.png';
//将网络图片转成本地路径     
wx.getImageInfo({             
	src: imgUrl,     
	success: function(res) {
		ctx.drawImage(res.path, 40, 100, 200, 200)               
		ctx.draw();   
	}
})