回答

以下是使用命令行将 Chrome 浏览器打开的网页动画录制成 PNG 图片序列 的完整方案，包含 Puppeteer 自动化脚本和 FFmpeg 屏幕录制两种方法：

方法一：使用 Puppeteer CLI（推荐）

1. 安装 Puppeteer（需 Node.js 环境）

npm init -y
npm install puppeteer

2. 创建截图脚本 capture.js

const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: null,
    args: ['--window-size=1080,1920']
  });

  const page = await browser.newPage();
  await page.goto('https://your-animation-url.com'); // 替换为你的网页地址

  // 等待动画加载（根据实际情况调整）
  await page.waitForTimeout(2000);

  const totalFrames = 60;
  const frameInterval = 100; // 每帧间隔时间（毫秒）

  for (let i = 0; i < totalFrames; i++) {
    const framePath = path.join(__dirname, 'frames', `frame_${String(i).padStart(4, '0')}.png`);
    await page.screenshot({ path: framePath, fullPage: false });
    console.log(`Captured frame ${i + 1}/${totalFrames}`);
    await page.waitForTimeout(frameInterval);
  }

  await browser.close();
})();

3. 运行脚本

node capture.js

方法二：使用 Chrome 命令行 + DevTools 协议（进阶）

1. 启动带远程调试的 Chrome

chrome.exe --remote-debugging-port=9222 --window-size=1080,1920

2. 使用 chrome-remote-interface 工具

npm install chrome-remote-interface

3. 创建 devtools.js 脚本

const CDP = require('chrome-remote-interface');
const fs = require('fs');
const path = require('path');

(async () => {
  const client = await CDP();
  const {Page, Emulation, DOM} = client;

  // 创建输出目录
  const outputDir = path.resolve(__dirname, 'frames');
  if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir);

  await Page.enable();
  await Emulation.setDeviceMetricsOverride({
    width: 1080,
    height: 1920,
    deviceScaleFactor: 1,
    mobile: true
  });

  await Page.navigate({url: 'https://your-animation-url.com'});
  await new Promise(resolve => setTimeout(resolve, 3000)); // 等待加载

  for (let i = 0; i < 60; i++) {
    const screenshot = await Page.captureScreenshot({format: 'png'});
    fs.writeFileSync(path.join(outputDir, `frame_${String(i).padStart(4, '0')}.png`), Buffer.from(screenshot.data, 'base64'));
    console.log(`Frame ${i + 1} captured`);
    await new Promise(resolve => setTimeout(resolve, 100)); // 每秒10帧
  }

  await client.close();
})();

4. 运行脚本

node devtools.js

方法三：Chrome 原生命令行（仅首帧）

chrome.exe --headless --disable-gpu --window-size=1080,1920 --screenshot=frames/frame https://your-animation-url.com

限制：仅能捕获页面首帧，无法录制动画序列。

后续处理：使用 FFmpeg 合成视频

ffmpeg -framerate 30 -i frames/frame_%04d.png \
       -c:v libx264 -pix_fmt yuv420p \
       -r 30 \
       output_video.mp4