I am running Node backend in an AWS Lambda environment to create images on a FabricJS canvas. Everything is working fine except the fontFamily
of the textboxes in the canvas.
I am storing my in a folder named fonts
inside the src
folder.
src
|----fonts
|----fabric.conf
|----Source
|----SourceSansPro-Regular.otf
|----SourceSansPro-Semibold.otf
I create a fonts.conf
file as instructed from here: Include custom fonts in AWS Lambda
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<dir>/var/task/fonts/</dir>
<cachedir>/tmp/fonts-cache/</cachedir>
<config></config>
</fontconfig>
Environment variables are set
FONTCONFIG_PATH="/var/task/fonts"
FONTCONFIG_FILE="/var/task/fonts/fonts.conf"
I attempt to register the fonts and create the canvas, as instructed from here: http://fabricjs.com/fabric-intro-part-4#node
const { fabric } = require('fabric')
fabric.nodeCanvas.registerFont('fonts/Source/SourceSansPro-Regular.otf', {family: 'Source Sans Pro'})
fabric.nodeCanvas.registerFont('fonts/Source/SourceSansPro-Semibold.otf', {family: 'Source Sans Pro Semibold'})
const canvas = new fabric.Canvas('canvas', {})
canvas.loadFromJSON(canvasJson, async () => {
...
canvas.renderAll()
const dataURL = canvas.toDataURL({
width: canvas.width,
height: canvas.height,
left: 0,
top: 0,
format: 'png'
})
console.log(dataURL)
})
Here is an excerpt of canvasJson
"objects": [
...
{
"shadow": null,
...
"type": "textbox",
...
"fontFamily": "Source Sans Pro Semibold",
...
},
...
]
The resulting dataURL
contains the default font and not the desired font, see image below.
from FabricJS Node on AWS Lambda - fonts are not appearing on data uri image
No comments:
Post a Comment