前言

最近一直在接微信小程序的需求，其中生成微信海報功能簡直讓人頭禿。

微信原生使用canvas繪制海報功能會遇到很多奇奇怪怪的問題。

• 微信海報清晰度不高。
• 微信海報編輯器預(yù)覽和真機不一致。
• 海報代碼冗余惡心，無法維護。

在我尋找各種解決方案，最終得到一個比較完美的方案。

使用服務(wù)端生成海報，客戶端只需要實現(xiàn)保存相冊邏輯。

實現(xiàn)方案

fabric服務(wù)端渲染 + 可視化拖拽生成配置

可視化配置生成工具 用來生成fabric需要的配置文件。

在完成頁面框架后，選擇導(dǎo)出json，修改海報的資源配置。

fabric服務(wù)端生成圖片 用來使用生成的配置文件渲染出base64的圖片資源。

服務(wù)端核心代碼如下

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圖片資源
    // 發(fā)送給客戶端 或者進一步處理
    //  建議先 data.replace(/[\r\n]/g, "") 以防iOS無法渲染
  });

客戶端部分代碼不在贅述，基本就是調(diào)用文件管理器，存儲到臨時文件，需要保存的時候調(diào)用保存到相冊的API。

注意事項

• 服務(wù)端往客戶端返回base64圖片資源數(shù)據(jù)時，建議使用replace(/[\r\n]/g, "") 替換空格換行，否則iOS可能無法顯示。
• 如果服務(wù)端壓力太大，建議使用redis之類的緩存提升響應(yīng)速度。

資源鏈接

• fabric
• painter-custom-poster

聯(lián)系作者

如果有任何疑問，請訪問原文鏈接進行評論，或者在原文進行打賞留言，作者會及時進行解疑答惑。