HTML本身无法截图，需JS配合Canvas或html2canvas等前端库，或Puppeteer等服务端工具；html2canvas有跨域、fixed定位、字体图标等限制，服务端截图更稳定但成本高。

HTML 页面截图不能靠纯 HTML 实现

HTML 本身没有截图能力，它只是标记语言。真正能触发浏览器端截图的，是 JavaScript 配合 Canvas 或第三方库（如 html2canvas、dom-to-image）；服务端截图则需 Puppeteer、Playwright 等工具。别在 <img> 或 meta 标签里找截图属性——不存在。

用 html2canvas 截当前页面最常用但有坑

它把 DOM 渲染成 Canvas，再导出为图片。看似简单，实际限制多：

• html2canvas 不支持跨域图片、iframe、CSS filters（如 blur()）、transform: scale() 后的精确还原
• 遇到 position: fixed 元素，常被截到顶部或丢失，需临时改为 absolute 再恢复
• 字体图标（如 Font Awesome）可能显示为方块，得确保字体已加载完成再调用 html2canvas(document.body)
• 示例最小可用写法：

  html2canvas(document.body).then(canvas => {
    const link = document.createElement('a');
    link.download = 'screenshot.png';
    link.href = canvas.toDataURL('image/png');
    link.click();
  });

想截完整长图？注意滚动高度和异步内容

默认 html2canvas 只截视口内区域。要截整个页面，必须手动设置容器高度并滚动到底部再合成——但它不自动处理。更稳妥的做法是：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 用 document.documentElement.scrollHeight 获取真实高度，临时设为 body 的 min-height
• 对含懒加载图片、Vue/React 异步组件的页面，先等 setTimeout 或监听 load 事件，再调用截图
• 若页面含大量 SVG，dom-to-image 比 html2canvas 兼容性更好，但不支持 CSS 伪元素（::before/::after）

服务端截图更稳定但成本高

用 Puppeteer 启动无头 Chrome，可完美复现渲染结果，适合生成报告、监控快照：

立即学习“前端免费学习笔记（深入）”；

• 需 Node.js 环境，且部署时要装 Chromium（Docker 镜像体积大，约 170MB+）
• 截图前必须显式 await page.waitForTimeout(500) 或 page.waitForSelector('.loaded')，否则截到空白页
• 不推荐在用户点击瞬间调用服务端截图，延迟高、并发差；更适合定时任务或后台导出
• 关键代码片段：

  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:3000', { waitUntil: 'networkidle2' });
  await page.screenshot({ path: 'full.png', fullPage: true });

真要上线用，别只测 Chrome；iOS Safari 对 html2canvas 的 getComputedStyle 返回值有差异，某些 flex 布局会错位。截图不是“点一下就完”，得按实际 DOM 结构、资源加载节奏、目标浏览器逐项过一遍。