Prender

基于 canvas 的无状态 React 渲染器，可以用于 NodeJS 的图片生成，不建议用于网页。

开始

安装依赖

需要 React 18 版本，暂不支持 19。

pnpm add @bietiaop/prender canvas react@18
pnpm add @types/react@18 --D

:::warning

安装 Canvas 需要 node-gyp 进行编译。

:::

如果你需要绘制 Echarts，需要安装 Echarts

npm install echarts

编写一个页面

import React from 'react';
import { View, Text } from '@bietiaop/prender';

export const App: React.FC = () => {
    return (
        <View style={{ marginTop: 20, padding: 10, backgroundColor: 'white', width: 460, border: '1px solid #ddd' }}>
            <Text style={{ fontSize: 20, marginBottom: 10 }}>多行文本布局示例</Text>
            <Text style={{ fontSize: 14, color: '#333', lineHeight: 22 }}>
                这是一段很长很长的文本，它将在这里演示自动换行的功能。当文本内容超出容器宽度时，它应该能优雅地切换到下一行，而不会溢出容器。这是所有现代UI框架都必须具备的基础能力。
            </Text>
            <Text style={{ fontSize: 14, color: '#333', lineHeight: 22, marginTop: 10, numberOfLines: 2 }}>
                这是一个关于省略号截断的例子。这段文字同样非常长，但是我们通过设置 numberOfLines 属性，将其限制在两行以内。如果内容超出了两行，那么在第二行的末尾就会出现一个省略号，像这样...
            </Text>
        </View>
    )
}

渲染

import React from 'react';
import path from 'path';
import { render } from '@bietiaop/prender';
import { App } from './app';

render(React.createElement(App), path.join(__dirname, './output/image.png'), 500, null, {
    createDir: true,
})

Echarts

如果想要渲染 Echarts，需要先安装 Echarts。

import React from 'react';
import { View, Text, Chart } from '@bietiaop/prender';
import * as echarts from 'echarts';
import type { EChartsOption } from 'echarts';

const chartOption: EChartsOption = {
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [150, 230, 224, 218, 135],
    type: 'bar'
  }]
};

export const App: React.FC = () => {
    return (
        <View>
            <Text style={{ fontSize: 20, marginBottom: 10 }}>ECharts 图表示例</Text>
            <Chart
                style={{ width: 460, height: 300 }}
                option={chartOption}
                echarts={echarts}
            />
        </View>
    )
}