简介
interactive-screenshot 是一个基于 Puppeteer 和 JSDOM 的 npm 包，它可以使用 headless Chrome 在无界面模式下捕获网页截图，并且支持在图像上添加交互式行为和链接，例如悬停、点击等。该工具的最大优点是易于集成和配置，可以通过简单的 API 调用实现高度定制化的交互式截图展示。
安装
使用 npm 安装 interactive-screenshot：
npm install interactive-screenshot
使用方法
interactive-screenshot 的 API 设计旨在让它易于在不同的场景下使用，下面是一个基本的用例：
-- -------------------- ---- -------
----- --------------------- - ----------------------------------
------ -- -- -
----- ---------------- - ----- -----------------------
---- --------------------------
--------------- ------ -----
--------------- ----------
-------------- ---------------
------- -
----- -
----------------- --------
-
-
---
-- ---------------- ------ ------ ------- -- ----
-----API 详解
interactiveScreenshot(options: InteractiveScreenshotOptions): Promise<buffer>
options 参数
options.url: string
类型: string
需截图页面的 URL。
options.width?: number
类型: number
默认值: 1280
截图的宽度。
options.height?: number
类型: number
默认值: 800
截图的高度。
options.hoverSelectors?: string[]
类型: string[]
默认值: []
选择器数组，当鼠标悬停在与选择器匹配的元素上时，添加悬停行为。
options.clickSelectors?: string[]
类型: string[]
默认值: []
选择器数组，当单击与选择器匹配的元素时，添加点击行为。
options.hideSelectors?: string[]
类型: string[]
默认值: []
选择器数组，隐藏与选择器匹配的元素。
options.addCSS?: string
类型: string
默认值: ''
可以添加 CSS 样式表覆盖页面样式。
返回
返回一个包含截图的 Buffer 对象。
示例
下面是一个复杂的示例，演示了如何使用 interactive-screenshot 截取页面的视图并添加交互式行为：
-- -------------------- ---- -------
----- --------------------- - ----------------------------------
------ -- -- -
----- ---------------- - ----- -----------------------
---- --------------------------
--------------- ------ -----
--------------- ----------
-------------- ---------------
------- -
----- -
----------------- --------
-
-
---
-- ---------------- ------ ------ ------- -- ----
-----在上面的示例中，interactive-screenshot 可以捕获 https://www.example.com 的屏幕截图，将鼠标悬停在匹配 #nav li 的元素上时添加悬停行为，单击 #link 元素时添加点击行为，并且隐藏与 #ad-banner 选择器匹配的元素。还可以添加额外的 CSS 样式，从而定制化页面的外观。
总结
通过本文，你应该已经了解了如何使用 interactive-screenshot 包进行交互式截图，以及如何自定义该工具的配置，从而展示页面的视图和交互行为。该库非常易于集成和使用，可以在前端开发和产品设计中发挥重要的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601a81e8991b448de447