最优雅的实现微信小程序海报功能解决方案

前言

最近一直在接微信小程序的需求，其中生成微信海报功能简直让人头秃。

微信原生使用canvas绘制海报功能会遇到很多奇奇怪怪的问题。

• 微信海报清晰度不高。
• 微信海报编辑器预览和真机不一致。
• 海报代码冗余恶心，无法维护。

在我寻找各种解决方案，最终得到一个比较完美的方案。

使用服务端生成海报，客户端只需要实现保存相册逻辑。

实现方案

fabric服务端渲染 + 可视化拖拽生成配置

可视化配置生成工具 用来生成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之类的缓存提升响应速度。

资源链接

• fabric
• painter-custom-poster

联系作者

如果有任何疑问，请访问原文链接进行评论，或者在原文进行打赏留言，作者会及时进行解疑答惑。