uniapp支付宝小程序生成分享图方案（最新）

最近公司业务开发支付宝小程序，功能涉及生成分享图的功能，开始研究实现方案。

开发过微信小程序的小伙伴应该都知道，在微信中生成分享图最常用的方案是使用第三方库Painter

GitHub官方仓库地址为：https://github.com/Kujiale-Mobile/Painter

但是官方的代码只支持微信小程序，所以需要自己改造下官方的代码。听到改造，大家也不用一下子被难住了，原因是：

市面上其他小程序基本都是“摸着微信过河”，所以api，组件命名等基本都是一致的，只是前缀有所不同，例如wx.开头我们只需要把它替换成my.（支付宝小程序）

这里有份我已经改造好的代码，大家可以直接下载导入使用。但值得注意的是，这份代码整体功能与官方仓库并不同步，如果你发现官方文档声明的功能没有正常运行，最好自己去GitHub拿份最新的代码改造一下。

代码下载地址：https://pan.quark.cn/s/3d7fd9938216

由于使用的是uniapp开发方案，下面的写法教程为uniapp写法

下载完成后，在src目录下新建mycomponents文件夹(uniapp识别支付宝原生组件强制统一存放的地方)

接着在使用到的页面中引入组件：

vue页面中使用：

拿到生成渲染图的地址

保存图片

 1 uni.saveImageToPhotosAlbum({
 2   filePath: this.imageUrl,
 3   success: function () {
 4     uni.showToast({
 5       title: "下载成功！",
 6       icon: "none",
 7       duration: 3000,
 8     });
 9   }
10 })

题外话

本人在业余时间开发了个ai导航网站，汇总了各种分类AI工具，欢迎点击跳转查看：https://ainav-wiki.org