Fix support for JPEG & WebP (#55)

.changeset/old-chicken-sniff.md

@@ -0,0 +1,5 @@
+---
+'astro-og-canvas': minor
+---
+
+Switches to using the “full” `canvaskit-wasm` build to generate images. This fixes support for rendering as JPEG or WEBP instead of the default PNG.

.changeset/three-pigs-compare.md

@@ -0,0 +1,11 @@
+---
+'astro-og-canvas': minor
+---
+
+Updates `canvaskit-wasm` to the latest release
+
+**Note:** pnpm users may need to manually update in their project too:
+
+```sh
+pnpm i canvaskit-wasm@^0.39.1
+```

demo/src/pages/formats/[path].ts

@@ -0,0 +1,31 @@
+import { OGImageRoute } from 'astro-og-canvas';
+
+export const { getStaticPaths, GET } = OGImageRoute({
+  param: 'path',
+  pages: {
+    'png.md': {
+      title: 'Test image (PNG)',
+      description: 'Renders an Open Graph image to a PNG file',
+      format: 'PNG',
+    },
+    'jpeg.md': {
+      title: 'Test image (JPEG)',
+      description: 'Renders an Open Graph image to a JPEG file',
+      format: 'JPEG',
+    },
+    'webp.md': {
+      title: 'Test image (WEBP)',
+      description: 'Renders an Open Graph image to a WEBP file',
+      format: 'WEBP',
+    },
+  },
+  getSlug(path, { format }) {
+    const ext = format.toLowerCase();
+    path = path.replace(/^\/src\/pages\//, '');
+    path = path.replace(/\.[^.]*$/, '') + '.' + ext;
+    return path;
+  },
+  getImageOptions: (_path, page) => ({
+    ...page,
+  }),
+});

demo/src/pages/formats/index.md

@@ -0,0 +1,17 @@
+---
+title: Different formats
+description: Test page demonstrating that images render correctly in different formats
+layout: ../../layouts/Layout.astro
+---
+
+# Astro OpenGraph Images with CanvasKit
+
+This test renders the same image to different formats.
+
+![Example PNG](/formats/png.png)
+
+![Example JPEG](/formats/jpeg.jpeg)
+
+![Example WEBP](/formats/webp.webp)
+
+- [Home](/)

demo/src/pages/index.md

@@ -14,3 +14,4 @@ This test project uses `astro-og-canvas` to generate OpenGraph images from code.
 - [Font Tests](/font-test)
 - [Local font test](/local-font-test)
 - [Background image tests](/background-test)
+- [Different formats](/formats)

packages/astro-og-canvas/package.json

@@ -35,7 +35,7 @@
     "typescript": "^5.0.0"
   },
   "dependencies": {
-    "canvaskit-wasm": "^0.37.0",
+    "canvaskit-wasm": "^0.39.1",
     "deterministic-object-hash": "^2.0.2",
     "entities": "^4.4.0"
   },

packages/astro-og-canvas/src/assetLoaders.ts

@@ -1,5 +1,4 @@
-import type { FontMgr } from 'canvaskit-wasm';
-import init from 'canvaskit-wasm';
+import init, { type FontMgr } from 'canvaskit-wasm/full';
 import fs from 'node:fs/promises';
 import { createRequire } from 'node:module';
 import { shorthash } from './shorthash';
@@ -11,7 +10,7 @@ const error = (...args: any[]) => console.error('[astro-og-canvas]', ...args);
 /** CanvasKit singleton. */
 export const CanvasKitPromise = init({
   // TODO: Figure how to reliably resolve this without depending on Node.
-  locateFile: (file) => resolve(`canvaskit-wasm/bin/${file}`),
+  locateFile: (file) => resolve(`canvaskit-wasm/bin/full/${file}`),
 });
 
 class FontManager {

packages/astro-og-canvas/src/types.ts

@@ -1,4 +1,4 @@
-import type { CanvasKit } from 'canvaskit-wasm';
+import type { CanvasKit } from 'canvaskit-wasm/full';
 
 export type RGBColor = [r: number, g: number, b: number];
 export type XYWH = [x: number, y: number, w: number, h: number];

test/astro-auto-import.ts

@@ -21,4 +21,9 @@ test('it should have built the index page correctly', () => {
   assert.match(page, /<img src="\/og\/index.png" alt="Example image">/);
 });
 
+test('it should have rendered a JPEG correctly', () => {
+  const buff = loadImage('/formats/jpeg.jpeg');
+  assert.not.equal(buff.length, 0);
+})
+
 test.run();