微信小程序拖拽生成海报

预热
最近公司微信小程序中有生成海报的需求，起初打算使用Canvas进行手动绘制，但是中间结果和过程不太顺利，骨子里想着有没有什么能偷懒的东西，果不其然，开源让世界更美好，在微信小程序论坛上找到了相关的主题帖,下面汇总一下；

正菜
主要使用的工具：一个是kujiale团队开源的Painter小程序生成图片库, 另一个是志军（微信论坛昵称）大哥开源的配套Painter库的可视化小程序海报生成工具（拖拽工具）,下面给出相关的git地址和微信论坛技术贴地址:
Painter git地址：https://github.com/Kujiale-Mobile/Painter
Painter 技术贴：https://developers.weixin.qq.com/community/develop/doc/000048447844f80b9107d64ab51006
可视化工具贴：https://developers.weixin.qq.com/community/develop/article/doc/000e222d9bcc305c5739c718d56813
可视化工具传送门：https://lingxiaoyi.github.io/painter-custom-poster/
工具一览：

dafce5e7-0d75-4619-ba69-25c13d68aba1-image.png

使用说明
使用大致流程（以Taro环境下开发为例，本质上来说不限制框架）：
01.在您的微信小程序应用中安装Painter库，安装过程在 Painter 技术贴上已给出，贴出部分截图：

4afc582b-1832-4b38-bda2-79b02818daf4-image.png

安装过后（本人使用的是推荐的安装方式），在您的框架中已应用第三方组件的方式使用该组件，文件需要放在src文件夹下，部分截图如下：

9adf5b2a-1119-4d55-a4da-c332bda8b6a5-image.png

02.在图形化界面上拖拽好你的页面后（图形界面提示还不太完善，需要你自己摸索个10分钟），利用可视化工具生成对应的JSON配置，并将JSON配置down下来，放在一个JS文件中，供Painter初始化使用，其他的我们就可以继续按照Painter技术贴来完成相关使用即可；

• 列表将JSON导出来，并存入到js文件中；

  
  fd2ccb50-563d-4fdc-b476-6af1f8d3f636-image.png

• 存入到json文件，提供配置，正因为如此，你也可以传入相关的变量，从而动态改变海报上信息；

  
  9049f6e6-bf4a-41ec-b629-7da026269de6-image.png

• 变量使用方式

  
  e141504b-2a32-4436-a32b-b70129e75417-image.png

突然结束
按照技术贴来就没问题啦，其实kujiale团队也提供了Taro Demo （各位大爷轻点），里面有部分初始化细节，这里就送上传送门 ；
https://github.com/Kujiale-Mobile/Taro-Painter-Demo

鸣谢
再次感谢各位大佬，让小弟又偷懒了一次！！！给位看官，去尝试一下吧！