UD5工具箱
html2canvas
html2canvas是一个开源的JavaScript库，用于在浏览器端将HTML元素渲染为Canvas图像。它的工作原理是通过遍历目标元素及其所有子元素的DOM结构和计算后的CSS样式，在HTML5 Canvas画布上重新绘制整个页面。html2canvas不依赖任何服务端处理，所有操作都在客户端浏览器中完成，因此具有良好的隐私性和响应速度。该库广泛应用于网页截图、内容导出、分享图片生成等场景。需要特别注意的是，html2canvas本质上是一种"重绘"而非"截图"，它通过解析DOM和CSS来模拟浏览器的渲染过程，因此对于某些复杂的CSS效果（如CSS 3D变换、WebGL内容等）可能无法完全准确地还原。
DOM（文档对象模型）
DOM（Document Object Model，文档对象模型）是HTML和XML文档的编程接口。它将文档表示为一个由节点组成的树形结构，每个节点代表文档中的一个部分（如元素、文本、属性等）。在网页截图的上下文中，DOM是html2canvas进行页面重绘的基础数据源。html2canvas会递归遍历DOM树中的每个节点，读取其标签类型、属性值、子节点关系等信息，然后在Canvas上按照相同的层级关系进行绘制。理解DOM结构对于排查截图中可能出现的元素缺失或样式异常问题非常重要，因为截图结果与DOM的结构和CSS的计算值直接相关。
Canvas（画布）
Canvas是HTML5引入的一个HTML元素，它提供了一个可通过JavaScript进行绑制的位图区域。在网页截图工具中，Canvas充当了"画板"的角色，html2canvas将解析后的页面内容绘制到Canvas上，然后通过Canvas的toDataURL()方法将绘制结果转换为PNG格式的图片数据。Canvas支持2D绘图上下文（2D Context）和WebGL绘图上下文，在网页截图场景中主要使用2D Context。Canvas的尺寸决定了输出图片的分辨率，对于超长页面的截图，工具会创建一个高度很大的Canvas来容纳所有内容。Canvas是浏览器原生支持的API，无需安装任何插件即可使用。
视口宽度（Viewport Width）
视口宽度是指浏览器渲染网页时可用的可视区域宽度，通常以像素（px）为单位。在响应式网页设计中，视口宽度是一个核心概念，因为它决定了页面元素的布局排列方式。CSS中的媒体查询（Media Queries）会根据视口宽度的不同来应用不同的样式规则，从而实现页面在不同设备上的自适应显示。在网页整页截图工具中，用户可以自定义视口宽度来控制截图的渲染效果。例如，设置为375像素会触发移动端的媒体查询样式，使页面以手机布局方式渲染；设置为1280像素则会使用桌面端的样式规则。正确的视口宽度设置是获取高质量截图的关键因素之一。
PNG（便携式网络图形）
PNG（Portable Network Graphics）是一种无损压缩的位图图片格式，诞生于1996年，旨在替代受专利限制的GIF格式。PNG采用DEFLATE压缩算法，能够在不损失任何图像信息的前提下减小文件体积。PNG格式支持三种颜色模式：灰度、RGB彩色和RGBA（含Alpha通道的RGB），其中Alpha通道支持256级透明度，能够实现精细的半透明效果。PNG格式特别适合存储网页截图，因为网页截图通常包含大量的文字、线条和纯色区域，PNG的无损压缩在这些内容上能取得很好的压缩效果，同时保持极高的画面质量。PNG文件的扩展名为.png， MIME类型为image/png。
滚动截图拼接
滚动截图拼接是一种将多个分段截图无缝合并为一张完整长图的技术。当目标网页的内容高度超过浏览器的可视区域时，单次截图只能捕获可视部分的内容。滚动截图技术通过模拟页面滚动操作，在不同的滚动位置分别截取页面内容，然后将这些分段截图在垂直方向上进行精确拼接。拼接算法需要处理相邻截图之间的重叠区域，通过像素级对比找到最佳拼接点，以确保拼接后的长图不会出现内容重复、断裂或错位。现代的滚动截图工具还会智能处理页面中的固定定位元素（如悬浮导航栏、固定底部栏等），避免这些元素在每次分段截图中重复出现，从而保证最终长图的内容准确性。
响应式设计（Responsive Design）
响应式设计是一种网页设计方法论，其核心理念是让同一个网页能够自适应地在不同尺寸和分辨率的设备上提供最佳的浏览体验。响应式设计主要依赖三项技术：弹性布局（Flexbox/Grid）、弹性图片（max-width等）和媒体查询（Media Queries）。媒体查询允许开发者针对不同的视口宽度定义不同的CSS规则，从而在手机、平板、桌面电脑等设备上呈现不同的布局样式。网页整页截图工具的视口宽度自定义功能与响应式设计密切相关，通过设置不同的视口宽度，用户可以获取页面在各种设备断点下的渲染效果，这对于响应式设计的测试和验证非常有价值。
渲染引擎（Rendering Engine）
渲染引擎是浏览器中负责将HTML、CSS、JavaScript等Web技术转换为可视化页面的核心组件。不同的浏览器使用不同的渲染引擎：Chrome和Edge使用Blink引擎，Firefox使用Gecko引擎，Safari使用WebKit引擎。渲染引擎的工作流程包括：解析HTML构建DOM树、解析CSS构建CSSOM树、将DOM树和CSSOM树合并为渲染树、计算布局（Layout）、绘制（Paint）和合成（Composite）。html2canvas虽然是在JavaScript层面进行页面重绘，但其目标是尽可能模拟浏览器原生渲染引擎的输出结果。了解渲染引擎的工作原理有助于理解为什么某些CSS效果在截图中可能无法完美还原，以及如何通过调整CSS来获得更好的截图效果。
Base64编码
Base64是一种将二进制数据编码为ASCII文本字符串的编码方案。在Web开发中，Base64编码常用于将图片等二进制资源嵌入到HTML或CSS中，形成所谓的"数据URI"（Data URI）。在网页截图的场景中，如果目标页面包含大量网络图片，将这些图片转换为Base64编码后嵌入HTML可以避免截图过程中因网络延迟或图片加载失败而导致的截图不完整问题。html2canvas能够正确处理Base64编码的图片资源，将其解码后绘制到Canvas上。不过需要注意的是，Base64编码会使图片数据的体积增大约33%，对于包含大量高分辨率图片的页面，编码后的HTML代码可能会非常庞大。
CSS计算样式（Computed Style）
CSS计算样式是指浏览器经过级联（Cascade）、继承（Inherit）和默认值处理后，最终应用到每个DOM元素上的实际CSS属性值。与开发者编写的源代码中的CSS规则不同，计算样式反映的是元素最终呈现的完整样式信息。在网页截图过程中，获取准确的计算样式对于正确渲染页面至关重要。html2canvas会通过window.getComputedStyle()方法获取元素的计算样式，然后基于这些样式值在Canvas上进行绘制。这也是为什么使用浏览器开发者工具获取的HTML代码（包含计算后样式信息）通常比直接查看源代码更适合用于截图的原因。