小程序生成海报：经过 json 配置方式轻松制做一张海报图

背景

因为咱们没法将小程序直接分享到朋友圈，但分享到朋友圈的需求又不少，业界目前的作法是利用小程序的 Canvas 功能生成一张带有二维码的图片，而后引导用户下载图片到本地后再分享到朋友圈。而小程序 Canvas 功能是很难用的，每每为了绘制一张简单图片，就得写上一堆 boilerplate code ，并且一不当心还会踩到 Canvas 的各类彩蛋（坑）。我想此时你的心情确定是这样的。

分析

想到小程序中有如此大量的生成图片需求，而 Canvas 生成方法又是如此难用和坑爹。那咱们就想到可不能够作一款能够很方便生成图片，而且还能屏蔽掉直接使用 Canvas 的一些坑的库呢？因此咱们发起了 “画家计划— 经过 json 数据形式，来进行动态渲染并绘制出图片”。 Painter 库的总体架构以下：

首先，咱们定义了一套绘图 JSON 规范，开发者能够根据需求构建生成图片的 Palette（调色板），而后在程序运行过程当中把调色板传入给 Painter（画家）。Painter 会调用 Pen（画笔），根据 Palette 内容绘制出对应的图片后返回。

解决问题

那可不能够开发一款生成海报的插件库呢?

• 首先，只须要提供一份简单的参数配置文件便可
• 解决掉小程序Canvas遇到的一些大大小小的坑
• 有严苛的测试环节，解决各类环境和各类机型遇到的问题，并提供稳定的线上版本
• 长期维护，并有专人更新迭代更新颖的功能

###隆重介绍

Painter 的优点

• 功能全，支持文本、图片、矩形、qrcode 类型的 view 绘制
• 布局全，支持多种布局方式，如 align（对齐方式）、rotate（旋转）
• 支持渐变色，阴影，配置简单，容易上手，兼容性好
• 支持圆角，其中图片，矩形，和整个画布支持 borderRadius 来设置圆角
• 杠杠的性能优化，咱们对网络素材图片加载实现了一套 LRU 存储机制，不用重复下载素材图片。
• 杠杠的容错，由于某些特殊状况会致使 Canvas 绘图不完整。咱们对此加入了对结果图片进行检测机制，若是绘图出错会进行重绘。

How To Use

运行例子

git clone https://github.com/Kujiale-Mobile/Painter.git
复制代码

代码下载后，用小程序 IDE 打开后便可使用。

注：请选择小程序项目，非小游戏，例子中无 appid，因此没法在手机上运行，若是须要真机调试，请在打开例子时，填上本身的小程序 id

具体详细使用教程 GitHub 地址https://github.com/Kujiale-Mobile/Painter

扩展工具

因为编写配置再加上调试仍是有些麻烦,故制做一款可视化编辑工具,直接拖动编辑元素便可生成海报 可视化编辑拖拽直接生成painter代码

• 工具体验地址lingxiaoyi.github.io/painter-cus…
• 工具使用文档juejin.im/post/5d8b20…

例子展现