Fix loading fonts in web-worker

Author: hipstersmoothie

packages/types/src/index.ts

@@ -38,7 +38,7 @@ export interface RGBAColor {
 
 export const JimpClassSchema = z.object({
   bitmap: z.object({
-    data: z.instanceof(Buffer),
+    data: z.union([z.instanceof(Buffer), z.instanceof(Uint8Array)]),
     width: z.number(),
     height: z.number(),
   }),
@@ -60,7 +60,7 @@ export interface JimpClass {
     w: number,
     h: number,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    cb: (x: number, y: number, idx: number) => any,
+    cb: (x: number, y: number, idx: number) => any
   ): JimpClass;
   scan(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -69,6 +69,6 @@ export interface JimpClass {
     w?: number,
     h?: number,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    f?: (x: number, y: number, idx: number) => any,
+    f?: (x: number, y: number, idx: number) => any
   ): JimpClass;
 }

plugins/plugin-print/package.json

@@ -82,6 +82,7 @@
     "parse-bmfont-ascii": "^1.0.6",
     "parse-bmfont-binary": "^1.0.6",
     "parse-bmfont-xml": "^1.1.6",
+    "simple-xml-to-json": "^1.2.2",
     "zod": "^3.23.8"
   },
   "publishConfig": {

plugins/plugin-print/src/index.node.test.ts

@@ -32,7 +32,7 @@ async function createTextImage(
     maxHeight?: number;
     x?: number;
     y?: number;
-  },
+  }
 ) {
   const loadedFont = await loadFont(font);
   const image = new Jimp({ width, height, color: 0xffffffff });
@@ -76,7 +76,7 @@ describe("Write text over image", function () {
   });
 
   test("Jimp preset SANS_16_BLACK bitmap font positioned", async () => {
-    const font = await loadFont(fonts.SANS_16_BLACK);
+    const font = await loadFont(fonts.SANS_12_BLACK);
     const image = new Jimp({ width: 300, height: 100, color: 0xff8800ff });
     const output = await image
       .print({
@@ -93,7 +93,7 @@ describe("Write text over image", function () {
 
   test("Jimp loads font from URL", async () => {
     const font = await loadFont(
-      "https://raw.githubusercontent.com/jimp-dev/jimp/main/plugins/plugin-print/fonts/open-sans/open-sans-16-black/open-sans-16-black.fnt",
+      "https://raw.githubusercontent.com/jimp-dev/jimp/main/plugins/plugin-print/fonts/open-sans/open-sans-16-black/open-sans-16-black.fnt"
     );
     const image = new Jimp({ width: 300, height: 100, color: 0xff8800ff });
     const output = await image
@@ -111,7 +111,7 @@ describe("Write text over image", function () {
 
   test("Max width works without spaces", async () => {
     const font = await loadFont(
-      "https://raw.githubusercontent.com/jimp-dev/jimp/main/plugins/plugin-print/fonts/open-sans/open-sans-16-black/open-sans-16-black.fnt",
+      "https://raw.githubusercontent.com/jimp-dev/jimp/main/plugins/plugin-print/fonts/open-sans/open-sans-16-black/open-sans-16-black.fnt"
     );
     const image = new Jimp({ width: 300, height: 100, color: 0xff8800ff });
     const output = await image

plugins/plugin-print/src/load-bitmap-font.ts

@@ -2,7 +2,12 @@ import parseASCII from "parse-bmfont-ascii";
 import parseXML from "parse-bmfont-xml";
 import readBinary from "parse-bmfont-binary";
 import { BmCharacter, BmKerning, BmFont, BmCommonProps } from "./types.js";
+import png from "@jimp/js-png";
+import { createJimp } from "@jimp/core";
+import path from "path";
+import { convertXML } from "simple-xml-to-json";
 
+const CharacterJimp = createJimp({ formats: [png] });
 const HEADER = Buffer.from([66, 77, 70, 3]);
 
 function isBinary(buf: Buffer | string) {
@@ -20,17 +25,16 @@ function isBinary(buf: Buffer | string) {
   );
 }
 
-function parseFont(
-  file: string,
-  data: Buffer | string,
-): {
+export interface LoadedFont {
   chars: BmCharacter[];
   kernings: BmKerning[];
   common: BmCommonProps;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   info: Record<string, any>;
   pages: string[];
-} {
+}
+
+function parseFont(file: string, data: Buffer | string): LoadedFont {
   if (isBinary(data)) {
     if (typeof data === "string") {
       data = Buffer.from(data, "binary");
@@ -52,13 +56,70 @@ function parseFont(
   return parseASCII(data);
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function parseNumbersInObject<T extends Record<string, any>>(obj: T) {
+  for (const key in obj) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (obj as any)[key] = parseInt(obj[key], 10);
+    } catch {
+      // do nothing
+    }
+
+    if (typeof obj[key] === "object") {
+      parseNumbersInObject(obj[key]);
+    }
+  }
+
+  return obj;
+}
+
 /**
  *
  * @param bufferOrUrl A URL to a file or a buffer
  * @returns
  */
-async function loadBitmapFontData(bufferOrUrl: string | Buffer) {
-  if (typeof bufferOrUrl === "string") {
+export async function loadBitmapFontData(
+  bufferOrUrl: string | Buffer
+): Promise<LoadedFont> {
+  const isWebWorker = self.document === undefined;
+
+  if (isWebWorker && typeof bufferOrUrl === "string") {
+    const res = await fetch(bufferOrUrl);
+    const text = await res.text();
+    const json = convertXML(text);
+
+    const font = json.font.children.reduce(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (acc: Record<string, any>, i: any) => ({ ...acc, ...i }),
+      {}
+    );
+    const pages: LoadedFont["pages"] = [];
+    const chars: LoadedFont["chars"] = [];
+    const kernings: LoadedFont["kernings"] = [];
+
+    for (let i = 0; i < font.pages.children.length; i++) {
+      const p = font.pages.children[i].page;
+      const id = parseInt(p.id, 10);
+      pages[id] = parseNumbersInObject(p.file);
+    }
+
+    for (let i = 0; i < font.chars.children.length; i++) {
+      chars.push(parseNumbersInObject(font.chars.children[i].char));
+    }
+
+    for (let i = 0; i < font.kernings.children.length; i++) {
+      kernings.push(parseNumbersInObject(font.kernings.children[i].kerning));
+    }
+
+    return {
+      info: font.info,
+      common: font.common,
+      pages,
+      chars,
+      kernings,
+    } satisfies LoadedFont;
+  } else if (typeof bufferOrUrl === "string") {
     const res = await fetch(bufferOrUrl);
     const text = await res.text();
 
@@ -69,11 +130,9 @@ async function loadBitmapFontData(bufferOrUrl: string | Buffer) {
 }
 
 type RawFont = Awaited<ReturnType<typeof loadBitmapFontData>>;
+export type ResolveBmFont = Omit<BmFont, "pages"> & Pick<RawFont, "pages">;
 
-export async function loadBitmapFont(
-  bufferOrUrl: string | Buffer,
-): Promise<Omit<BmFont, "pages"> & Pick<RawFont, "pages">> {
-  const font = await loadBitmapFontData(bufferOrUrl);
+export async function processBitmapFont(file: string, font: LoadedFont) {
   const chars: Record<string, BmCharacter> = {};
   const kernings: Record<string, BmKerning> = {};
 
@@ -94,5 +153,10 @@ export async function loadBitmapFont(
     ...font,
     chars,
     kernings,
+    pages: await Promise.all(
+      font.pages.map(async (page) =>
+        CharacterJimp.read(path.join(path.dirname(file), page))
+      )
+    ),
   };
 }

plugins/plugin-print/src/load-font.ts

@@ -1,9 +1,4 @@
-import { loadBitmapFont } from "./load-bitmap-font.js";
-import { createJimp } from "@jimp/core";
-import png from "@jimp/js-png";
-import path from "path";
-
-const CharacterJimp = createJimp({ formats: [png] });
+import { loadBitmapFontData, processBitmapFont } from "./load-bitmap-font.js";
 
 /**
  * Loads a Bitmap Font from a file.
@@ -21,24 +16,17 @@ const CharacterJimp = createJimp({ formats: [png] });
  * ```
  */
 export async function loadFont(file: string) {
+  const isWebWorker = self.document === undefined;
   let fileOrBuffer: string | Buffer = file;
 
-  if (typeof window === "undefined") {
+  if (typeof window === "undefined" && !isWebWorker) {
     const { existsSync, promises: fs } = await import("fs");
 
     if (existsSync(file)) {
       fileOrBuffer = await fs.readFile(file);
     }
   }
 
-  const font = await loadBitmapFont(fileOrBuffer);
-
-  return {
-    ...font,
-    pages: await Promise.all(
-      font.pages.map(async (page) =>
-        CharacterJimp.read(path.join(path.dirname(file), page)),
-      ),
-    ),
-  };
+  const data = await loadBitmapFontData(fileOrBuffer);
+  return processBitmapFont(file, data);
 }