前言
最近一直在接微信小程序的需求，其中生成微信海報(bào)功能簡(jiǎn)直讓人頭禿童漩。
微信原生使用canvas繪制海報(bào)功能會(huì)遇到很多奇奇怪怪的問(wèn)題春锋。
- 微信海報(bào)清晰度不高。
- 微信海報(bào)編輯器預(yù)覽和真機(jī)不一致期奔。
- 海報(bào)代碼冗余惡心，無(wú)法維護(hù)呐萌。
在我尋找各種解決方案，最終得到一個(gè)比較完美的方案罗晕。
使用服務(wù)端生成海報(bào)，客戶端只需要實(shí)現(xiàn)保存相冊(cè)邏輯小渊。
實(shí)現(xiàn)方案
可視化配置生成工具 用來(lái)生成fabric需要的配置文件。
在完成頁(yè)面框架后挖胃，選擇導(dǎo)出json梆惯，修改海報(bào)的資源配置酱鸭。
fabric服務(wù)端生成圖片 用來(lái)使用生成的配置文件渲染出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ā)送給客戶端 或者進(jìn)一步處理
// 建議先 data.replace(/[\r\n]/g, "") 以防iOS無(wú)法渲染
});
客戶端部分代碼不在贅述怯屉，基本就是調(diào)用文件管理器蔚舀，存儲(chǔ)到臨時(shí)文件锨络，需要保存的時(shí)候調(diào)用保存到相冊(cè)的API。
注意事項(xiàng)
- 服務(wù)端往客戶端返回base64圖片資源數(shù)據(jù)時(shí)礼患，建議使用replace(/[\r\n]/g, "") 替換空格換行掠归，否則iOS可能無(wú)法顯示。
- 如果服務(wù)端壓力太大虏冻，建議使用redis之類的緩存提升響應(yīng)速度。
資源鏈接
聯(lián)系作者
如果有任何疑問(wèn)厨相，請(qǐng)?jiān)L問(wèn)原文鏈接進(jìn)行評(píng)論，或者在原文進(jìn)行打賞留言悯森，作者會(huì)及時(shí)進(jìn)行解疑答惑绪撵。
