将fabricjs与nodejs一起使用时的Gebbrich字母答案

【问题标题】：Gebbrich letters when using fabricjs with nodejs将fabricjs与nodejs一起使用时的Gebbrich字母
【发布时间】：2020-11-08 01:36:53
【问题描述】：

我正在尝试在我的 nodejs 后端中使用结构，该后端部署在高山映像中（节点版本 8.15）所以我制作了一个负责创建模板的函数，如下所示

const creatCardTemplate = function(user){
    let canvas = new fabric.Canvas(null, {width: 650, height: 400});
    canvas.backgroundColor="#fff";
    let company=user.company?user.company.companyName:"YOUR COMPANY";
    let text = new fabric.IText(company,{fontSize:30,top:100,textAlign:'center',fontWeight:'bold'});
    canvas.add(text);
    canvas.centerObjectH(text);

    text = new fabric.IText(user.first_name+" "+user.last_name,{fontSize:26,top:140,textAlign:'center',fontWeight:'bold'});
    canvas.add(text);
    canvas.centerObjectH(text);

    :::: etc
        
    canvas.renderAll(); 
    return canvas;
}

一个非常普通的代码，然后我只是从中生成一个 PNG 图像

let canvas = creatCardTemplate(user);
let image = canvas.toDataURL({ format: 'png'});

仅此而已，它在我的本地机器上运行良好，但我的问题是，当我部署它时，png 结果是如此 gebbrich 像这样

我尝试了许多解决方案，例如更改创建方法（我尝试通过加载 json 数据来创建画布），我还尝试将字体系列更改为 Arial，但始终是相同的该死方块

【问题讨论】：

标签： node.js fabricjs

【解决方案1】：

经过一番挣扎后，我发现了问题，问题是 alpine 图像没有安装任何字体（我们知道如果 Fabric 安装在前端框架中，Fabric 将使用浏览器字体）但在我的情况下与nodejs（后端）一起安装，因此它将使用系统中可用的字体。

所以我安装了一些字体并添加它们以供 Fabric 使用，如下所示：首先我们需要导入

const { registerFont, createCanvas } = require('canvas')

然后我们添加我们想要的字体

registerFont('helpers/fonts/Roboto-Regular.ttf', { family: 'Roboto' })

那么我们只需要使用它:)

 let text = new fabric.IText("hello",{fontSize:30,top:100,textAlign:'center',fontFamily:'Roboto

【讨论】：