前言
最近一直在接微信小程序的需求，其中生成微信海报功能简直让人头秃。
微信原生使用canvas绘制海报功能会遇到很多奇奇怪怪的问题。
- 微信海报清晰度不高。
- 微信海报编辑器预览和真机不一致。
- 海报代码冗余恶心，无法维护。
在我寻找各种解决方案，最终得到一个比较完美的方案。
使用服务端生成海报，客户端只需要实现保存相册逻辑。
实现方案
可视化配置生成工具 用来生成fabric需要的配置文件。
在完成页面框架后，选择导出json，修改海报的资源配置。
fabric服务端生成图片 用来使用生成的配置文件渲染出base64的图片资源。
服务端核心代码如下
import { fabric } from "fabric";
const canvas = new fabric.StaticCanvas(null, {
width: width,
height: height
});
canvas.loadFromJSON(data, function () {
const data = canvas.renderAll().toDataURL();
// data就是base64图片资源
// 发送给客户端 或者进一步处理
// 建议先 data.replace(/[\r\n]/g, "") 以防iOS无法渲染
});
客户端部分代码不在赘述，基本就是调用文件管理器，存储到临时文件，需要保存的时候调用保存到相册的API。
注意事项
- 服务端往客户端返回base64图片资源数据时，建议使用replace(/[\r\n]/g, "") 替换空格换行，否则iOS可能无法显示。
- 如果服务端压力太大，建议使用redis之类的缓存提升响应速度。
资源链接
联系作者
如果有任何疑问，请访问原文链接进行评论，或者在原文进行打赏留言，作者会及时进行解疑答惑。
