Next.js+TypeScript环境下p5.js画布导出SVG问题求助

问题背景 #

我在Next.js结合TypeScript的项目里，实现了一个可下载p5.js画布的按钮，目前画布能正常绘制，但仅支持导出PNG格式，想了解如何实现SVG导出。此前尝试过p5.svg库，但遇到了Next.js SSR相关的问题。目前通过动态导入react-p5解决了画布运行问题，但仍无法导出SVG：

const Sketch = dynamic(import('react-p5'), { ssr: false });

当前相关代码 #

Setup函数

const setup = (p5: p5Types, canvasParentRef: Element) => {
    const canvasWidth = Number(partition.width) / devider;
    const canvasHeight = Number(partition.height) / devider;
    p5.createCanvas(canvasWidth, canvasHeight).parent(canvasParentRef);
};

Draw函数

const draw = (p5: p5Types) => {
    p5.background(255);

    for (let i = 0; i < lenghtOfSolution; i++) {
      if (solution?.wid?.[i] == 0) {
        p5.fill(0, 0, 0, 50);
        p5.rect(
          solution.x[i] / devider,
          solution.y[i] / devider,
          solution.w[i] / devider,
          solution.h[i] / devider
        );
      } else {
        p5.fill(255, 255, 255);
        p5.rect(
          solution.x[i] / devider,
          solution.y[i] / devider,
          solution.w[i] / devider,
          solution.h[i] / devider
        );
      }
      if (solution.w[i] > 50) {
        p5.textSize(10);
        p5.fill(0, 0, 0);
        p5.text(
          `ID:${solution.wid[i]}`,
          (solution.x[i] / devider + solution.x2[i] / devider) / 2,
          (solution.y[i] / devider - 20 + solution.y2[i] / devider) / 2
        ).textAlign(p5.CENTER, p5.CENTER);
        p5.textSize(12);
        p5.text(
          `${solution.w[i]} x ${solution.h[i]}`,
          (solution.x[i] / devider + solution.x2[i] / devider) / 2,
          (solution.y[i] / devider + solution.y2[i] / devider) / 2 + 5
        ).textAlign(p5.CENTER, p5.CENTER);
      }
    }
};

Sketch组件调用

return (
    <Sketch
      setup={setup}
      draw={draw}
    />
);

解决方案 #

要实现SVG导出，核心是切换p5.js的渲染器为SVG，并解决Next.js SSR的兼容问题，具体步骤如下：

1. 安装p5.svg并配置动态导入 #

首先安装依赖：

npm install p5.svg

修改react-p5的动态导入，同时加载p5.svg，避免SSR报错：

const Sketch = dynamic(
  async () => {
    // 动态加载p5.svg，确保仅在客户端执行
    await import('p5/svg');
    const module = await import('react-p5');
    return module.default;
  },
  { ssr: false }
);

2. 切换为SVG渲染器 #

修改setup函数，创建SVG画布替换默认的Canvas画布：

const setup = (p5: p5Types, canvasParentRef: Element) => {
    const canvasWidth = Number(partition.width) / devider;
    const canvasHeight = Number(partition.height) / devider;
    // 使用SVG渲染器创建画布
    p5.createCanvas(canvasWidth, canvasHeight, p5.SVG).parent(canvasParentRef);
};

3. 实现SVG导出逻辑 #

添加导出按钮和对应的处理函数，通过p5实例获取SVG内容并触发下载：

import { useRef } from 'react';

export default function YourCanvasComponent() {
  const p5InstanceRef = useRef<p5Types | null>(null);

  // 在setup中保存p5实例
  const setup = (p5: p5Types, canvasParentRef: Element) => {
    p5InstanceRef.current = p5;
    const canvasWidth = Number(partition.width) / devider;
    const canvasHeight = Number(partition.height) / devider;
    p5.createCanvas(canvasWidth, canvasHeight, p5.SVG).parent(canvasParentRef);
  };

  // SVG导出函数
  const handleExportSVG = () => {
    if (!p5InstanceRef.current) return;
    
    const p5 = p5InstanceRef.current;
    // 获取SVG元素
    const svgElement = p5._renderer.drawingElement;
    // 序列化SVG内容
    const svgData = new XMLSerializer().serializeToString(svgElement);
    // 创建下载Blob
    const blob = new Blob([svgData], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(blob);
    
    // 触发下载
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.download = 'canvas-export.svg';
    downloadLink.click();
    
    // 清理资源
    URL.revokeObjectURL(url);
  };

  return (
    <div>
      <button onClick={handleExportSVG}>导出SVG</button>
      <Sketch setup={setup} draw={draw} />
    </div>
  );
}

4. 适配SVG渲染器的绘制逻辑 #

p5.svg渲染器部分API和Canvas有差异，需要调整draw函数中的文本对齐逻辑（必须在text调用前设置textAlign）：

// 修改draw中的文本绘制部分
if (solution.w[i] > 50) {
  p5.textSize(10);
  p5.fill(0, 0, 0);
  p5.textAlign(p5.CENTER, p5.CENTER); // 移到text调用前
  p5.text(
    `ID:${solution.wid[i]}`,
    (solution.x[i] / devider + solution.x2[i] / devider) / 2,
    (solution.y[i] / devider - 20 + solution.y2[i] / devider) / 2
  );
  p5.textSize(12);
  p5.text(
    `${solution.w[i]} x ${solution.h[i]}`,
    (solution.x[i] / devider + solution.x2[i] / devider) / 2,
    (solution.y[i] / devider + solution.y2[i] / devider) / 2 + 5
  );
}

注意事项 #

• p5.svg不支持部分Canvas专属API（如image()的部分参数、像素操作），需确保绘制逻辑兼容SVG渲染器
• 测试时需在客户端环境运行，Next.js的SSR/SSG页面中所有涉及DOM操作的代码需确保仅在浏览器执行
• 如果遇到样式丢失问题，可以手动为SVG元素添加必要的CSS样式

内容的提问来源于stack exchange，提问作者Karl-Emil Grarup Hertz