Long Image Generator

通用长图（竖版图片）生成技能，可将文本、公式、图表等内容渲染为精美的长条图片。

支持的内容类型

输出规格

• 默认宽度：1080px
• 最小高度：500px
• 最大高度：无限制（自动扩展）
• 背景色：#FFFFFF (可定制)
• 文字色：#1D3557 (深海蓝)
• 标题色：#E85D4E (龙虾红)
• 强调色：#F4A261 (暖橙)

生成流程

1. 内容规划

将用户需求拆分为若干 PART（模块），每个 PART 高度建议 600-1200px：

PART 1: 封面/标题区 (~400px)
PART 2: 核心内容区 (~800px)
PART 3: 示例/练习区 (~600px)
PART 4: 总结/复习区 (~300px)

2. Canvas 渲染

使用 OpenClaw 的 canvas 工具渲染 HTML 为图片：

// 基础模板结构
const template = `
\x3C!DOCTYPE html>
\x3Chtml>
\x3Chead>
  \x3Cstyle>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&family=JetBrains+Mono&display=swap');
    body { font-family: 'Noto Sans SC', sans-serif; margin: 0; padding: 0; }
    .part { padding: 40px; margin-bottom: 20px; }
    .title { color: #E85D4E; font-size: 48px; font-weight: 700; }
    .content { color: #1D3557; font-size: 28px; line-height: 1.8; }
    .formula { font-size: 32px; }
  \x3C/style>
\x3C/head>
\x3Cbody>
  ${content}
\x3C/body>
\x3C/html>
`;

canvas.action = 'present';
canvas.javaScript = template;
canvas.width = 1080;
canvas.height = totalHeight;

3. LaTeX 公式渲染

在 HTML 中直接使用 LaTeX：

\x3C!-- 使用 KaTeX -->
\x3Clink rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
\x3Cscript src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js">\x3C/script>

\x3C!-- 公式示例 -->
\x3Cdiv class="formula">$$\\int_a^b f(x)dx = F(b) - F(a)$$\x3C/div>

4. 代码高亮

\x3Clink rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/github.min.css">
\x3Cscript src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js">\x3C/script>
\x3Cpre>\x3Ccode class="language-python">def f(x):
    return x**2\x3C/code>\x3C/pre>

输出流程

1. 生成 Canvas

调用 canvas 工具生成 HTML 渲染：

{
  "action": "present",
  "javaScript": "HTML模板",
  "width": 1080,
  "height": auto,
  "outputFormat": "png"
}

2. 下载图片

Canvas 输出会自动返回图片路径，通常位于： /root/.openclaw/media/outbound/longimage_*.png

3. 提供下载

使用 lightclaw_upload_file 上传并提供下载链接，或用 litterbox 临时链接。

常用模板

模板 A: 课程笔记长图

\x3Cdiv style="width:1080px; background:#FFFFFF;">
  \x3C!-- 封面区 -->
  \x3Cdiv style="padding:60px; text-align:center; background:linear-gradient(135deg, #2E5C8A 0%, #1D3557 100%);">
    \x3Ch1 style="color:#FFFFFF; font-size:56px; margin:0;">${标题}\x3C/h1>
    \x3Cp style="color:#A8DADC; font-size:28px; margin-top:20px;">${副标题}\x3C/p>
  \x3C/div>
  
  \x3C!-- 内容区 -->
  \x3Cdiv style="padding:40px 60px;">
    \x3Ch2 style="color:#E85D4E; font-size:40px; border-left:8px solid #E85D4E; padding-left:20px;">${章节标题}\x3C/h2>
    \x3Cdiv style="color:#1D3557; font-size:28px; line-height:2.0; margin-top:30px;">
      ${正文内容}
    \x3C/div>
    \x3C!-- 公式区 -->
    \x3Cdiv style="background:#F1FAEE; padding:30px; border-radius:12px; margin:30px 0;">
      $${LaTeX公式}$
    \x3C/div>
  \x3C/div>
  
  \x3C!-- 底部信息 -->
  \x3Cdiv style="padding:40px 60px; background:#A8DADC; text-align:center;">
    \x3Cspan style="color:#1D3557; font-size:24px;">🦞 定积出品\x3C/span>
  \x3C/div>
\x3C/div>

模板 B: 知识卡片

\x3Cdiv style="width:1080px; min-height:600px; background:#FFFFFF;">
  \x3Cdiv style="padding:50px;">
    \x3Ch1 style="color:#E85D4E; font-size:48px;">${核心概念}\x3C/h1>
    \x3Cdiv style="color:#1D3557; font-size:28px; line-height:2.0 margin-top:30px;">
      ${解释}
    \x3C/div>
    \x3Cdiv style="background:#F4A261; color:#1D3557; padding:30px; border-radius:12px; margin-top:40px;">
      \x3Cstrong>💡 关键点：\x3C/strong>${要点}
    \x3C/div>
  \x3C/div>
\x3C/div>

模板 C: 代码教程

\x3Cdiv style="width:1080px; background:#1D3557;">
  \x3Cdiv style="padding:40px;">
    \x3Ch1 style="color:#FFFFFF; font-size:48px;">${标题}\x3C/h1>
    \x3Cpre style="background:#2E5C8A; padding:30px; border-radius:12px; overflow-x:auto;">
\x3Ccode class="language-${语言}" style="color:#F1FAEE; font-size:24px; font-family:'JetBrains Mono', monospace;">
${代码内容}
\x3C/code>
    \x3C/pre>
  \x3C/div>
\x3C/div>

注意事项

1. 高度控制：单张长图建议不超过 15000px，否则可能导致渲染失败
2. 分块渲染：超长内容建议分多个 PART 分别渲染后拼接
3. 字体加载：使用 Google Fonts 需确保网络访问
4. LaTeX：复杂公式建议预渲染检查效果
5. 中文排版：推荐霞鹜文楷 / 思源黑体

跨界应用示例

本技能可应用于多个领域：

教育领域

• 课程思维导图
• 考试重点笔记
• 知识点速查表

读书笔记

• 书籍核心观点总结
• 读书心得整理

产品运营

• 功能说明图
• 用户指南
• 活动海报

技术文档

• API 说明图
• 架构图解

营销素材

• 产品卖点图
• 品牌故事长图