Switch to @resvg/resvg-wasm for generate-images (#35415)

Use the WASM module of [`resvg-js`](https://github.com/thx/resvg-js) to
replace `fabric` and the problematic native `canvas` dependency. WASM
works cross-platform so we can include it in the main `package.json`.

tools/generate-images.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import {loadSVGFromString, Canvas, Rect, util} from 'fabric/node'; // eslint-disable-line import-x/no-unresolved
+import {initWasm, Resvg} from '@resvg/resvg-wasm';
 import {optimize} from 'svgo';
 import {readFile, writeFile} from 'node:fs/promises';
 import {argv, exit} from 'node:process';
@@ -27,37 +27,23 @@ async function generate(svg, path, {size, bg}) {
     return;
   }
 
-  const {objects, options} = await loadSVGFromString(svg);
-  const canvas = new Canvas();
-  canvas.setDimensions({width: size, height: size});
-  const ctx = canvas.getContext('2d');
-  ctx.scale(options.width ? (size / options.width) : 1, options.height ? (size / options.height) : 1);
-
-  if (bg) {
-    canvas.add(new Rect({
-      left: 0,
-      top: 0,
-      height: size * (1 / (size / options.height)),
-      width: size * (1 / (size / options.width)),
-      fill: 'white',
-    }));
-  }
-
-  canvas.add(util.groupSVGElements(objects, options));
-  canvas.renderAll();
-
-  let png = Buffer.from([]);
-  for await (const chunk of canvas.createPNGStream()) {
-    png = Buffer.concat([png, chunk]);
-  }
-
-  await writeFile(outputFile, png);
+  const resvgJS = new Resvg(svg, {
+    fitTo: {
+      mode: 'width',
+      value: size,
+    },
+    ...(bg && {background: 'white'}),
+  });
+  const renderedImage = resvgJS.render();
+  const pngBytes = renderedImage.asPng();
+  await writeFile(outputFile, Buffer.from(pngBytes));
 }
 
 async function main() {
   const gitea = argv.slice(2).includes('gitea');
   const logoSvg = await readFile(new URL('../assets/logo.svg', import.meta.url), 'utf8');
   const faviconSvg = await readFile(new URL('../assets/favicon.svg', import.meta.url), 'utf8');
+  await initWasm(await readFile(new URL(import.meta.resolve('@resvg/resvg-wasm/index_bg.wasm'))));
 
   await Promise.all([
     generate(logoSvg, '../public/assets/img/logo.svg', {size: 32}),

tools/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "gitea-tools",
-  "version": "1.0.0",
-  "description": "Build tools for Gitea",
-  "type": "module",
-  "private": true,
-  "dependencies": {
-    "fabric": "^6.7.1",
-    "svgo": "^4.0.0",
-    "fast-glob": "^3.3.3"
-  },
-  "optionalDependencies": {
-    "canvas": "^3.2.0"
-  },
-  "pnpm": {
-    "onlyBuiltDependencies": ["canvas"],
-    "overrides": {
-      "canvas": "3.2.0"
-    }
-  }
-}