fix: fix ssr cannot load image (#6648)

* fix: fix ssr cannot load image * chore: update version
antvis · Dec 18, 2024 · 7ac448c · 7ac448c
1 parent 94b2ac3
commit 7ac448c
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 3 deletions.
diff --git a/packages/g6-ssr/__tests__/assets/bin.png b/packages/g6-ssr/__tests__/assets/bin.png
diff --git a/packages/g6-ssr/__tests__/assets/node-image.jpeg b/packages/g6-ssr/__tests__/assets/node-image.jpeg
diff --git a/packages/g6-ssr/__tests__/graph.spec.ts b/packages/g6-ssr/__tests__/graph.spec.ts
@@ -224,4 +224,21 @@ describe('createGraph', () => {
 
     graph.destroy();
   });
+
+  it('node image', async () => {
+    const graph = await fn('image', 'jpeg', {
+      waitForRender: 1000,
+      node: {
+        style: {
+          iconSrc: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+        },
+      },
+    });
+
+    expect(graph).toMatchFile('./assets/node-image.jpeg');
+
+    graph.exportToFile(join(__dirname, './assets/node-image'));
+
+    graph.destroy();
+  });
 });
diff --git a/packages/g6-ssr/package.json b/packages/g6-ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-ssr",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Support SSR for G6",
   "keywords": [
     "antv",

diff --git a/packages/g6-ssr/src/canvas.ts b/packages/g6-ssr/src/canvas.ts
@@ -1,7 +1,7 @@
 import { Renderer } from '@antv/g-canvas';
 import { Canvas as G6Canvas } from '@antv/g6';
 import type { Canvas as NodeCanvas } from 'canvas';
-import { createCanvas as createNodeCanvas } from 'canvas';
+import { createCanvas as createNodeCanvas, Image as NodeImage } from 'canvas';
 import type { Options } from './types';
 
 /**
@@ -12,7 +12,7 @@ import type { Options } from './types';
  * @returns <zh/> [G6 画布, NodeCanvas 画布] | <en/> [G6Canvas, NodeCanvas]
  */
 export function createCanvas(options: Options): [G6Canvas, NodeCanvas] {
-  const { width, height, background, outputType, devicePixelRatio = 2 } = options;
+  const { width, height, background = 'white', outputType, devicePixelRatio = 2 } = options;
   const nodeCanvas = createNodeCanvas(width, height, outputType as any);
   const offscreenNodeCanvas = createNodeCanvas(1, 1);
 
@@ -25,6 +25,7 @@ export function createCanvas(options: Options): [G6Canvas, NodeCanvas] {
     offscreenCanvas: offscreenNodeCanvas as any,
     devicePixelRatio,
     enableMultiLayer: false,
+    createImage: () => new NodeImage(),
     renderer: () => {
       const renderer = new Renderer();
       const htmlRendererPlugin = renderer.getPlugin('html-renderer');