html2canvas最直接但有局限：无法截iframe、跨域资源和伪元素，滚动区域只截视口；dom-to-image更准但依赖FileSaver且不支持SVG滤镜；浏览器API仅限扩展使用。
HTML网页截图用 html2canvas 最直接，但别指望它能截到 iframe、跨域资源或 CSS 伪元素
原生 HTML 没有截图 API，html2canvas 是目前最常用、上手最快的方案。它本质是把 DOM 渲染成 canvas，再导出为图片，不是真“屏幕捕获”。这意味着：
-
html2canvas无法渲染<iframe>内容（哪怕同域），会留白或报错Failed to execute 'toDataURL' on 'HTMLCanvasElement' - 跨域图片、字体、样式表会被 CORS 阻止，导致空白或模糊；必须服务端配合设置
Access-Control-Allow-Origin，前端加useCORS: true -
::before/::after伪元素默认不渲染，需手动启用allowTaint: true+useCORS: true，且仍不稳定 - 滚动区域（如
overflow-y: scroll）只截当前视口，要全内容得先计算并拼接，scrollY和scale参数要配平
用 dom-to-image 替代时要注意：它依赖 FileSaver，且不支持 SVG 滤镜和部分 CSS 变量
dom-to-image 基于 SVG + rasterization，比 html2canvas 更准确还原 CSS，但兼容性更敏感：
- 必须引入
dom-to-image和FileSaver（saveAs函数来自后者），漏一个就domtoimage is not defined或点击无反应 - CSS 自定义属性（
--main-color）在旧版 Chrome / Safari 中可能失效，建议编译后写死值或 fallback - SVG 内嵌的
<filter>、<mask>会被忽略，阴影/模糊效果丢失，可改用box-shadow替代 - 导出 PNG 用
domtoimage.toPng(node)，但返回的是 Promise，必须.then(blob => saveAs(blob, 'xxx.png'))，不能直接download
chrome.runtime.sendMessage 调用浏览器截图 API 仅限 Chrome 扩展，网页脚本无法直连
有人搜“HTML 截图”会翻到 chrome.tabs.captureVisibleTab，但这属于 Chrome 扩展权限体系，普通网页 JS 无法调用：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 需要 manifest.json 声明
"permissions": ["activeTab", "tabs"]，且用户手动安装扩展 - 网页内执行
chrome.runtime.sendMessage会直接报Cannot read property 'sendMessage' of undefined - 即使注入 content script，也仅能截当前 tab 可见区域，不能指定 DOM 节点；想截局部得先用
getBoundingClientRect()计算坐标再裁剪，成本高 - Firefox / Safari 完全不支持这套 API，别为网页功能设计扩展专用路径
导出文件名中文乱码？用 encodeURIComponent 编码再传给 saveAs
直接 saveAs(blob, '我的截图.png') 在 Windows Chrome 下常变成 ???.png，本质是 Blob URL 的 filename 参数未编码：
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
saveAs(blob, encodeURIComponent('我的截图.png')) - 如果用
html2canvas导出：canvas.toBlob(blob => saveAs(blob, encodeURIComponent('截图.png')), 'image/png') - 注意
encodeURIComponent会把.和-也编码，所以推荐只编码中文部分：'截图' + encodeURIComponent('测试') + '.png' - IE 不支持
saveAs，需降级用msSaveOrOpenBlob，但已基本可忽略
真正难的不是调哪个库，而是判断该截哪块、要不要等异步内容（比如图表加载完）、是否要隐藏按钮/水印、以及用户点了下载却没反应——那大概率是 blob 生成前就调了 saveAs，Promise 没链好。
