2天时间完成的本地网页内容转卡片

目的：我们的第一步计划是完成所有中共四个认知系统的拆解，包括宣传系统、外交系统、安全系统和技术（算法）系统，全部形成文字，以后慢慢打磨内容，然后再逐步转换成各种形式便于传播，长篇大论看的人很少，所以要以适应普通人方式来做，卡片就是一种在社交媒体和聊天软件发布的很好的方式。

展示成果

将目标内容：https://key29.com/9TREi5qa_a/ 转换成卡片

卡片效果如下：

个人觉得AI对内容缩写还需要加强。

实现路径：

先创造一个网页模板，也就是我分享的belt_road_longcard_v_4_print.html这个文件，这个文件我设计了4个容器，后面转换好的时候是按照容器输出图片，我已经设计好了，大家可以直接用，也可以上传让AI换成各种风格。点击下载

本地电脑部署

✅ 1. 安装 Node.js

如果你没装 Node.js，先去官网下载并安装：

👉 https://nodejs.org/

装完后，打开命令行：

\
node -v

看到版本号，说明安装好了。

✅ 2. 创建一个新文件夹

在你的电脑任意地方：

D:\html2png

然后在这个文件夹里，右键 → 在终端中打开（或输入 cmd）。

✅ 3. 初始化项目

执行：

npm init -y

它会生成一个 package.json 文件。

✅ 4. 安装 Puppeteer

执行：

bash
复制编辑
npm install puppeteer

它会自动下载 Chromium 内核。

✅ 5. 把 HTML 文件都放进文件夹

例如：

makefile
复制编辑
D:\html2png
 ├── belt_road_longcard_v_4.html
 ├── ...

✅ 6. 创建脚本文件

新建一个 screenshot.js 文件，内容如下（拷贝即可）：

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

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 高分辨率渲染
  await page.setViewport({
    width: 1600,
    height: 1200,
    deviceScaleFactor: 2  // 2倍清晰度
  });

  const htmlFiles = fs.readdirSync('.').filter(f => f.endsWith('.html'));

  for (const file of htmlFiles) {
    const filepath = 'file://' + path.resolve(file);
    console.log(`正在处理：${file}`);

    await page.goto(filepath, { waitUntil: 'networkidle0' });

    // 定位四个竖版容器
    const containers = await page.$$('div.max-w-md');

    console.log(`共找到 ${containers.length} 个容器`);

    if (containers.length === 0) {
      console.error('没有找到任何 .max-w-md 容器，请检查HTML结构！');
      continue;
    }

    let index = 1;
    for (const container of containers) {
      const box = await container.boundingBox();

      const filename = `${path.basename(file, '.html')}_${index}.png`;
      await page.screenshot({
        path: filename,
        clip: {
          x: box.x,
          y: box.y,
          width: box.width,
          height: box.height
        }
      });
      console.log(`已生成：${filename}`);
      index++;
    }
  }

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

这段代码会：

✅ 把当前文件夹里所有HTML文件都批量截图

✅ 截图文件名与HTML同名（换后缀）

✅ 输出PNG图片

✅ 7. 执行脚本

在命令行运行：

node screenshot.js

你会看到：

正在处理：belt_road_longcard_v_4.html
已生成：belt_road_longcard_v_4.png
...

结束后，PNG图片就全部在同一目录里。

✅ 8. 查看结果

双击 PNG 文件，就能看到完整截图。