在前端开发中，我们常常需要在页面中嵌入其他网站的预览图。这时，我们可以使用 npm 包 site-preview，它可以轻松地生成网站预览图，并且支持自定义屏幕分辨率和截图大小。
安装和使用
安装 site-preview 这个 npm 包非常简单，只需要在终端中运行以下命令即可：
npm install site-preview
安装后，我们可以在项目中引入 site-preview，并使用它提供的 API 对网站进行截图。下面是示例代码：
-- -------------------- ---- ------- ----- ----------- - ------------------------ -- ------------ ----- ------- - - ------- -------------- ------ ----- ------- --- -- -- ----- ------------------------------------- -------- -------- -- ----------------------- ---------- -- ----------------------- ------
在这段代码中，我们使用 site-preview 提供的 sitePreview 函数来生成预览图。在设置预览图相关的参数时，我们可以使用 options 对象来进行设置。其中：
- output：预览图的输出路径和文件名；
- width：浏览器窗口的宽度；
- height：浏览器窗口的高度。
需要注意的是，生成预览图的过程是异步的，因此我们需要使用 Promise 的方式来处理成功和失败的情况。
高级用法
除了基本的用法外，site-preview 还支持更多高级用法。下面是一些例子：
自定义浏览器标识
默认情况下，site-preview 使用的是 Headless Chrome 浏览器，且不会在生成的预览图中显示浏览器的标识。如果需要在预览图中添加浏览器标识，可以在 options 对象中添加 userAgent 属性，如下所示：
const options = {
output: 'preview.png',
width: 1280,
height: 720,
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36'
};捕获指定区域
有时候，我们只需要截取页面中的指定区域。在 site-preview 中，我们可以使用 clip 属性来设置要截取的区域。clip 属性是一个对象，包含四个属性：x、y、width 和 height。其中 x 和 y 是从左上角开始计算的坐标，width 和 height 分别是区域的宽度和高度。
-- -------------------- ---- -------
----- ------- - -
------- --------------
------ -----
------- ----
----- -
-- ----
-- ----
------ ----
------- ---
-
--自定义 Chrome 实例
默认情况下，site-preview 会创建一个新的 Headless Chrome 实例来进行截图。如果需要使用已存在的 Chrome 实例，可以在 options 对象中添加 chromePath 属性。chromePath 属性是一个字符串，表示 Chrome 的可执行文件路径。我们还需要将 SitePreview 的 chromePath 属性设置为 true，以表明我们将自己提供 Chrome 的路径。
-- -------------------- ---- ------- ----- ----------- - ------------------------ ----- ------- - - ------- -------------- ------ ----- ------- ---- ----------- --------------------- -------------------------------- ------- -- -- - ----------- - ---------- ----- ---- ---------------------- - ----- ------------------------------------- -------- -------- -- ----------------------- ---------- -- ----------------------- ------
总结
npm 包 site-preview 是一个非常实用的工具，可以帮助我们快速生成网站预览图。除此之外，site-preview 的高级用法也能够满足更多特定的需求。在使用 site-preview 的过程中，需要注意设置相关的参数，并采用 Promise 方式处理异常情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006733e890c4f727758360f