html2canvas是最常用前端截图方案，因其兼容性好、API简单、支持多数CSS样式，但属模拟渲染，会遗漏iframe、跨域图片及fixed定位元素。
纯 HTML 无法直接截图，所有“HTML 截图”功能都依赖 JavaScript 库或浏览器 API，且必须在用户主动触发（如点击按钮）下运行——没有后端配合时，
是唯一可行的前端路径。
为什么
是最常用选择
它把 DOM 元素渲染为
，再转成图片，兼容性好、API 简单、支持大部分 CSS 样式（包括 transform、flex、部分伪元素）。但它不是“真实截图”，而是模拟渲染，所以会漏掉：iframe 内容、跨域图片（会触发
污染）、
脱离文档流的元素（需手动调整偏移）。
实操建议：
确保目标元素有明确
或
，避免选中整个
导致布局错乱
对含 SVG 的区域，启用
并确保 SVG 内联（非外部引用）
截图前临时禁用动画：
，否则可能截到中间帧
导出 PNG 时加
提升清晰度，但注意内存占用翻倍
和
关键区别在哪
基于
+
渲染，理论上更接近原始样式，支持
规则和部分 filter 效果；但实际对 flex/grid 支持弱，遇到
易失效，且不支持
类 3D 变换。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
选型建议：
要保留文字可复制性、支持 SVG 图标原生缩放 → 用
要兼容 IE11、处理复杂布局、截图带阴影/渐变/伪类 → 用
两者都需处理跨域资源：图片必须同源，或服务端返回
如何避免“截图空白”或“内容错位”
这是最常踩的坑：目标元素未完全加载、字体未就绪、CSS 变量未计算完成，都会导致
渲染为空白或错位。
关键步骤：
等字体加载完成：
返回 Promise，再调用截图
对动态渲染内容（如 Vue/React 组件），确保
或
后再截图
若目标区域含
，先临时设为
，截图完恢复
滚动位置影响截图范围：用
获取相对视口坐标，必要时
真正难的是异步资源加载时机和样式计算顺序——不是代码写错，而是没等够。调试时加个
常能快速验证是否是时机问题。
canvashtml2canvascanvascanvasposition: fixedidclassbody{ useCORS: true, allowTaint: true }element.style.animation = 'none'scale: 2dom-to-imagehtml2canvasdom-to-imageSVGcanvg@media printbackground-image: linear-gradient()transform: rotateZ()dom-to-imagehtml2canvasAccess-Control-Allow-Origin: *canvasdocument.fonts.load('12px "PingFang SC"')nextTickuseEffect(() => {}, [])overflow: hiddenvisibleelement.getBoundingClientRect()window.scrollTo(0, 0)setTimeout(() => { screenshot() }, 500)