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

Question

我正在尝试在部署在 alpine 映像（节点版本 8.15）中的 nodejs 后端中使用 fabric 所以我做了一个函数负责创建模板如下

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 结果像这样乱七八糟

我尝试了很多解决方案，例如更改创建方法（我尝试通过加载 json 数据来创建 canvas），我还尝试将字体系列更改为 Arial 但是总是一样的该死的方块

Answer 1

经过一番努力，我发现了这个问题，问题是 alpine 图像没有安装任何字体（因为我们知道，如果 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

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

Gebbrich letters when using fabricjs with nodejs

node.js

fabricjs