有没有库可以通过 jsx 生成对应的图像?

Question

目前找到一个 next/og 库,但是生成的是一个图像响应。有没有类似的可以直接生成图像的库,最好支持生成多种图像格式。

import { ImageResponse } from 'next/og'
 
// Image metadata
export const alt = 'About Acme'
export const size = {
  width: 1200,
  height: 630,
}
 
export const contentType = 'image/png'
 
// Image generation
export default async function Image() {
  return new ImageResponse(
    (
      // ImageResponse JSX element
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        About Acme
      </div>
    ),
    // ImageResponse options
    {
      ...size,
    }
  )
}

ImageResponse 可以通过 jsx 渲染为图像,并为客户端响应该图像。但是这个专为 SEO 服务的,有没有更通用的库,不用直接返回图像响应,返回图像就可以了。参数也不要求必须是 jsx(本质上 ReactNode),可以是 html 字符串。运行环境在 node 环境。

Answer 1

jsx 是模版，跟生成图像没有任何关系。

js 当然可以生成图像，比如 html2canvas。

og 是 SEO 优化用的，跟你的需求无关。

Answer 2

建议使用Node.js写一个服务，服务接收HTML字符串作为入参，使用puppeteer等渲染html, 再调用 Page.screenshot() API对页面进行截图，返回给客户端

客户端使用ReactDOM.render(<YourComponent/>)将组件渲染为html字符串，获取后传递给Node.js服务

Answer 3

使用 puppeteer 截屏渲染

实现步骤：

1. 安装 puppeteer:

   npm install puppeteer

2. 编写代码渲染 JSX 并截图:

   const puppeteer = require('puppeteer');
   
   (async () => {
    // 启动无头浏览器
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
   
    // 在页面中加载 React 组件
    await page.setContent(`
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script>
      const App = () => React.createElement('div', null, 'Hello, world!');
      ReactDOM.render(React.createElement(App), document.getElementById('root'));
    </script>
    `);
   
    // 截图并保存为图片
    await page.screenshot({ path: 'jsx-screenshot.png' });
   
    // 关闭浏览器
    await browser.close();
   })();