微信做图小程序有哪些_微信小程序生成图片和图片保存

生成图片这个功能需要使用 Canvas ，先将要保存的图片使用 Canvas 画出来，然后调用相关方法保存到手机上。文中使用或是未使用的有关小程序中 Canvas 的 api 可以在 小程序Canvas相关Api 这里查看。

为了使用方便，我将这个需求的实现做成了一个组件，便于项目的其他地方复用，也遇到了一些因为使用自定义组件带来的问题

要实现的效果图

实现思路

相关的代码比较长，而且大部分为调用 Canvas 的 api 代码，整体贴出无必要。本文中只描述思路，具体代码看 小程序生成图片的微信代码片段 。

代码中的几个方法

drawRoundedRect ：用来绘制圆角矩形，此处不详述它的画图原理

point ：为方法 1 服务的，一看就懂

downFile ：对微信的下载方法进行了一层简单封装，传入 url ，返回一个 Promise

save ： 保存图片的相关逻辑

doAuth ：当调用 wx.saveImageToPhotosAlbum 方法保存图片时，如果没有保存图片的权限会保存失败，此时需要让用户重新授权

computedPercent ：一个快捷的计算比例的方法，传入从设计图上量出来的像素数即可， oldWidth 是设计图上的 Canvas 区域宽度

initData ：数据初始化，获取设备相关信息，将网络图下载到本地

writeCanvas ： 主要画图逻辑，调用此方法时保证所需数据已处