猫猫说了算
理解是偶然,误解是常态。

如何优雅的开发微信小程序海报功能

远浅发表于: 2020-04-06 15:25分类: 技术

前言

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

微信原生使用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之类的缓存提升响应速度。

资源链接

赠人玫瑰, 手有余香。🌹
打赏
特别鸣谢
感谢以下用户对本文的支持与鼓励
加载打赏用户中
发表评论
文章评论
暂无任何评论,快去发表吧~