微信小程序 canvas 绘图问题总结

最新推荐文章于 2026-04-17 18:37:41 发布

原创

最新推荐文章于 2026-04-17 18:37:41 发布 · 7.7k 阅读

标签

#小程序

收录于

本文总结了微信小程序中canvas绘图遇到的问题，包括网络图片的处理、图片保存授权、文字编辑换行、多图绘制、图片尺寸调整以及按钮层级问题。在处理网络图片时，需要先缓存到本地再绘制；保存图片需处理用户权限；文字换行需手动计算；大图处理可选择预览模式或绘制不同尺寸。同时，canvas总是覆盖其他内容，需用cover-view确保按钮可见。

业务中碰到微信小程序需要生成海报进行朋友圈分享，这个是非常常见的功能，没想到实际操作的时候花了整整一天一夜才搞好，微信的 canvas 绘图实在是太难用了，官方快点优化一下吧。

业务非常简单，只需要将用到的图片，文案素材拼装到一张图片，保存到本地就可以了。

首先创建画布，将一张网上的图片画到画布上。

const ctx = wx.createCanvasContext('shareCanvas');
ctx.drawImage("https://img3.doubanio.com/view/photo/l/public/p2327709524.jpg", 0, 0, 300, 400);
ctx.draw();

网络图片

这时候出现一个问题：在模拟器上没有报错，可是真机测试却什么也没画出来。网上搜索一阵发现微信小程序的 canvas.drawImage 是不支持网络图片的，只支持本地图片。所以，任何的网络图片都需要先缓存到本地，再通过 drawImage 调用存储的本地资源进行绘制，缓存可以通过 wx.getImageInfo 和 wx.downloadFile 实现，这次选用了 wx.getImageInfo, wx.downloadFile 没有试过，不知道可不可以。