Pico：用于高精度视口截图的客户端JavaScript库

这个库的开发是可能的，这要归功于：Gripless是一个针对Web应用的免费投诉解决方案，让您的用户对重要问题进行屏幕截图，并将这些截图输入到您的问题跟踪器中，并自动让您的用户知道何时修复了这些问题。https://usegripeless.com。

Pico'；的目标是在客户端生成高精度的任意视口截图。这与简单地使用Puppeteer或类似工具捕获网页不同，因为截图完全发生在客户端。

视口屏幕截图包括滚动的元素滚动状态、交叉原始图像、输入状态、网页字体、画布内容、当前视频帧内容，以及更多使用无头浏览器等无法获取的信息。

在撰写本文时，还没有旨在像Pico那样精确再现整个视口的现有解决方案。

该程序将给定窗口中显示的任何内容呈现为图像，这要归功于SVG&39；s<；ForeignObject>；。

没有原生的Javascript API可以截取用户当前在屏幕上看到的内容的屏幕截图(由于安全问题，可能永远不会有这样的截图)。

由于我们无法访问显示给用户的原始数据，因此我们必须手动重建它。此程序的运行得益于SVG&39；s<；ForeignObject>；，它允许您在其中插入任何有效的HTML内容，然后我们可以将其作为数据URL传递到Canvas>；drawImage中，并使用canvas.toBlob或canvas.toDataURL读出原始图像数据。

在一个子资源没有文本化的宇宙中，单凭上述一项就可以很好地发挥作用--正如你所知道的，这不是我们的宇宙。插入到<；img>；标记中的SVG(在我们的示例中是<；Canvas>；)无法显示任何外部资源，无论是它的图像、字体还是样式表。

检查所有样式表中的嵌套资源下载url()函数引用的任何资源，包括但不限于以下属性：

将输入状态(文本输入、复选框、文本项)复制到valueAttributes中，以便它们可以在SVG中显示。

通过Transform：Translate(针对根节点)和滚动节点的子节点的绝对位置来模拟所有滚动元素(包括元素)上的当前滚动位置。

将现有<；canvas&>元素转换为<；img&>标记，并将<；canvas&>的内容内联为src中的数据URL。

对rem字体大小、工作媒体查询、保留所有内容的大小等执行各种次要修复。

返回的DOM插入到<；iframe>；中，序列化为XML，转换为数据URL，放入Image中，然后呈现在Canvas>；上，该Canvas>；的内容通过canvas.toBlob读出，最后返回给程序的调用者，以及资源加载失败时的所有错误。

多亏了Fluture，Pico能够安全地累积所有异步资源错误，这真的是本机承诺的一个很好的替代方案，并迫使您编写类型安全错误。你可以在这里阅读图书馆作者写的一篇很棒的介绍性文章。

Pico是使用Fluture构建的，除了承诺之外，还通过以Fluture为后缀的函数提供了到Fluture的直接API。如果您不关心函数式编程，只需使用无后缀函数来处理Promise。

所有函数都返回一个"；ErrorStack"；，它基本上就是返回值加上计算时发生的任何错误。加载子资源时，大多数错误都是CORS或404相关问题。

export声明类型DetailedError={//人类可读的错误原因字符串：字符串；//正确的错误对象错误：Error；}；

EXPORT DECLARE TYPE OPTIONS={//将选择器数组导出到不应包含在输出中的节点。忽略：String[]；}；

声明常量对象URL：($Window：Window，artialOptions？：Partial<；Options>；)=>；Promise<；ErrorStack<；String>；>；声明常量对象URLFluture：($Window：Window，Options：Options)=>；Fluture<；DetailedError，ErrorStack<；String>；

将给定的窗口呈现为PNG图像并将其作为对象URL返回。由于内存的限制，这比使用dataURL更安全。处理完图像后，请记住调用URL.revokeObjectURL。

声明Const dataURL：($Window：Window，artialOptions？：Partial<；Options>；)=>；Promise<；ErrorStack<；String>；>；声明Const dataURLFluture：($Window：Window，Options：Options)=>；Fluture<；DetailedError，ErrorStack<；String>；

将给定窗口呈现为PNG图像并将其作为数据URL返回。请注意，在Chrome中，数据URL的限制是2MB，请尽可能使用objectURL。

声明常量svgObjectURL：($Window：Window，artialOptions？：Partial<；Options>；)=>；Promise<；ErrorStack<；String>；>；；声明常量svgObjectURLFluture：($Window：Window，Options：Options)=>；Fluture<；DetailedError，ErrorStack<；String>；

将给定的窗口渲染成SVG图像，并将其作为对象URL返回。此函数主要用于使用devtools检查Pico的输出，实际使用时优先使用其他函数。

该模块旨在通过代码捆绑包(如Rollup或webpack)在浏览器中独家使用。目前还没有提供单一的文件包版本。

Pico是针对最近基于Firefox和Blink的浏览器(Chrome、Opera、Brave、Edge)开发的。由于缺乏对<；Foreign Object>；的适当支持，它在Safari或旧的Edge版本上不起作用。

Pico的卖点是尽可能准确地呈现整个视点。如果您希望呈现单个DOM节点，请考虑使用上述库之一。