refactor: replace node-canvas with sharp for image processing

- Dropped `canvas` from package.json, lockfile, forge config, and vite
externals.
- Removed canvas-related system dependencies (`cairo`, `pango`,
`libjpeg-turbo`,
  `giflib`, `libsvgtiny`, etc.) from Arch PKGBUILD.
- Removed corresponding build inputs from Nix packaging and kept only
`vips` for `sharp`.
- Updated Nix `npmDepsHash` and version date.
- Simplified image pixel extraction in theme generator to use `sharp`
instead of canvas.

Author: Kasper24

forge.config.ts

@@ -82,7 +82,6 @@ const config: ForgeConfig = {
         fs.readFileSync(path.resolve(buildPath, "package.json")).toString()
       );
       packageJson.dependencies = {
-        canvas: "^3.1.2",
         conf: "^14.0.0",
         keytar: "^7.9.0",
         sharp: "^0.34.3",

package-lock.json

@@ -86,7 +86,6 @@
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-query": "^5.84.1",
     "@uiw/react-color": "^2.7.3",
-    "canvas": "^3.1.2",
     "chroma.ts": "^1.0.10",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

package.json

@@ -6,9 +6,7 @@ pkgdesc="Wallpaper and theme management application"
 arch=("x86_64")
 url="https://github.com/kasper24/walltone"
 license=("GPL3")
-depends=("nss" "libsecret" "cairo" "pango" "libjpeg-turbo"
-"giflib" "libsvgtiny" "swaybg" "mpvpaper"
-"linux-wallpaperengine" "cage" "grim" "ffmpeg")
+depends=("nss" "libsecret" "swaybg" "mpvpaper" "linux-wallpaperengine" "cage" "grim" "ffmpeg")
 makedepends=("npm" "nodejs" "git")
 source=("$pkgname::git+$url.git")
 sha256sums=("SKIP")

packaging/arch/PKGBUILD

@@ -3,13 +3,6 @@
   fetchurl,
   buildNpmPackage,
   libsecret,
-  pixman,
-  cairo,
-  pango,
-  libjpeg,
-  libpng,
-  librsvg,
-  giflib,
   pkg-config,
   makeWrapper,
   electron-bin,
@@ -43,11 +36,11 @@ let
 in
 buildNpmPackage rec {
   pname = "walltone";
-  version = "unstable-2025-08-02";
+  version = "unstable-2025-08-08";
 
   src = ../../.;
 
-  npmDepsHash = "sha256-bTD9ZQ9p+Q2CGiBXRrIRQgDtz809HNilnuOhplrGtUw=";
+  npmDepsHash = "sha256-WhiEyynQReumK4L7JGtfnunwaiiugObHuxZG7D3OppY=";
 
   dontNpmBuild = true;
   makeCacheWritable = true;
@@ -67,17 +60,6 @@ buildNpmPackage rec {
 
   buildInputs = [
     libsecret
-
-    # Node-Canvas dependencies
-    pixman
-    cairo
-    pango
-    libjpeg
-    libpng
-    librsvg
-    giflib
-
-    # Sharp dependencies
     vips
   ];
 

packaging/nix/package.nix

@@ -1,5 +1,4 @@
 import { parentPort } from "worker_threads";
-import { createCanvas, loadImage } from "canvas";
 import quantize, { ColorMap } from "quantize";
 import {
   argbFromRgb,
@@ -11,18 +10,26 @@ import * as chroma from "chroma.ts";
 import { type SettingsSchema } from "@electron/main/trpc/routes/settings/index.js";
 import generateMaterialTheme from "./material.js";
 import generateBase16Theme from "./base16.js";
+import sharp from "sharp";
 
 type Base16Settings = SettingsSchema["themeGeneration"]["base16"];
 type MaterialPixel = number;
 type QuantizePixel = [number, number, number];
 type QuantizeLib = "material" | "quantize";
 
 const getBytesFromImageSrc = async (imageSrc: string) => {
-  const image = await loadImage(imageSrc);
-  const canvas = createCanvas(image.width, image.height);
-  const context = canvas.getContext("2d");
-  context.drawImage(image, 0, 0);
-  return context.getImageData(0, 0, image.width, image.height).data;
+  let src: string | ArrayBuffer = imageSrc;
+
+  if (imageSrc.startsWith("http://") || imageSrc.startsWith("https://")) {
+    const response = await fetch(imageSrc);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch image from ${imageSrc}`);
+    }
+    src = await response.arrayBuffer();
+  }
+
+  const { data } = await sharp(src).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
+  return new Uint8ClampedArray(data);
 };
 
 const getPixelsFromBytes = (

src/electron/main/trpc/routes/theme/generator/index.ts

@@ -9,7 +9,6 @@ export const external = [
   ...builtins,
   "conf",
   "keytar",
-  "canvas",
   "sharp",
   // ...Object.keys("dependencies" in pkg ? (pkg.dependencies as Record<string, unknown>) : {}),
 ];