mcpField
E
exporting-to-png

exporting-to-png

github.com/spencerpauly创意与媒体868407 次安装13 周前更新
代码仓库

关于 exporting-to-png

将代码、Markdown、终端输出、图表或渲染后的界面转换为 PNG 图片的技能。它介绍多种方法，包括无头浏览器、代码截图工具和针对不同格式的转换器。

主要功能

  1. 01通过无头浏览器渲染 HTML
  2. 02使用 Carbon 或 Silicon 截取代码
  3. 03将 Mermaid 图表转换为 PNG
  4. 04将 SVG 文件转换为 PNG
  5. 05把终端输出保存为图片

适用场景

  1. 01为代码片段生成 PNG
  2. 02导出 Mermaid 图表用于文档
  3. 03将终端输出保存为图片

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill exporting-to-png

安装后在 Claude Code 中输入/exporting-to-png确认已加载。

详细介绍

导出为 PNG

将代码片段、Markdown 内容、终端输出、图表或渲染后的 UI 组件转换为 PNG 图像文件。

方法

1. 通过无头浏览器将 HTML 转换为 PNG

最灵活的方法。将任意内容渲染为 HTML 并截图。

# Using Playwright (if available)
npx playwright screenshot --full-page "file:///path/to/content.html" output.png

# Using Puppeteer one-liner
node -e "
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(\`<html>...</html>\`);
  await page.screenshot({ path: 'output.png', fullPage: true });
  await browser.close();
})();
"

步骤：

  1. 生成一个 HTML 文件，并为内容设置合适的样式（语法高亮、内边距、字体）
  2. 使用无头浏览器进行渲染和截图
  3. 如有需要，使用图像工具裁剪
2. 使用 Carbon 或 Silicon 将代码转换为 PNG

用于生成带样式的代码截图：

# silicon (Rust CLI, fast)
silicon --language python --output code.png source.py
silicon --from-clipboard --output code.png

# Or generate a Carbon URL for browser capture
# https://carbon.now.sh/?l=python&code=<url-encoded-code>
3. 将 Mermaid 图表转换为 PNG
# Using mermaid-cli
npx @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.png -b transparent

# Or with Docker
docker run --rm -v "$(pwd)":/data minlag/mermaid-cli mmdc -i /data/diagram.mmd -o /data/diagram.png
4. 将 SVG 转换为 PNG
# Using sharp (Node.js)
node -e "
const sharp = require('sharp');
sharp('input.svg').png().toFile('output.png');
"

# Using Inkscape CLI
inkscape input.svg --export-type=png --export-filename=output.png

# Using ImageMagick
convert input.svg output.png
5. 将终端输出转换为 PNG
# Using termshot (if installed)
termshot -- ls -la

# Manual approach: capture output, wrap in HTML with monospace font, screenshot

工作流

  1. 确定内容类型（代码、图表、HTML、终端、SVG）
  2. 检查环境中有哪些可用工具（which silicon、npx --help 等）
  3. 选择最佳方法并生成 PNG
  4. 验证输出文件存在且非空：file output.png && ls -la output.png
  5. 报告文件路径和尺寸

提示

  • 生成代码截图时，使用深色主题并留出充足的内边距（32px 以上），以获得精致的效果
  • 在 Playwright/Puppeteer 中将 deviceScaleFactor: 2 设为视网膜级输出
  • 对于透明背景，使用 --background transparent 或 omitBackground: true
  • 如果没有安装专用工具，请使用 HTML + 无头浏览器方法作为备用方案——它适用于所有内容

评论

支持 Markdown