前言
在 Web 开发过程中，对于使用截图的需求可能会比较常见，例如网站自动化测试、数据统计分析、页面展示等等。而 Node.js 生态下有一款强大的截图库，就是本文介绍的 @tsofist/webshot 包。该包基于 Node.js 和 PhantomJS（或者 SlimerJS） 构建，可以在不打开浏览器的情况下进行网站的截图操作。
在本文中，我们将详细介绍 @tsofist/webshot 包的使用教程，包括安装和基本使用的指南，以及实现定制和高级功能的深入讲解，最后给出一些应用示例供读者参考。
安装
@tsofist/webshot 包可以通过 npm 包管理器进行安装，只需在命令行输入以下命令：
npm install @tsofist/webshot
即可安装成功。
基本用法
@tsofist/webshot 包提供了便捷的接口，可以使用如下的代码段来生成网页截图：
-- -------------------- ---- -------
----- ------- - ----------------------------
------------------------------- ------------ ------------- -
-- ----- -
-----------------
- ---- -
---------------------
-
---表示通过 webshot 函数生成百度首页的截图，并保存到 baidu.png 文件中。其中：
- 第一个参数是需要截图的网址地址；
- 第二个参数是截图保存的文件路径；
- 第三个参数是回调函数，当截图生成后会触发该回调函数。
另外，@tsofist/webshot 还支持更多的可选配置项，例如：
- windowSize：窗口的宽度和高度；
- shotSize：截图区域的宽度和高度；
- siteType：使用哪种浏览器（PhantomJS 或 SlimerJS）。
深入讲解
定制网页截图
在一些特殊情况下，我们可能需要以不同的截图方式来呈现网页内容。例如，我们希望在截图时只截取页面上的某一部分区域，或者是截取多张图片后合成为一个无缝的全景图片。
@tsofist/webshot 包提供了一个 options 参数，可以方便的定制网页截图。
截取指定区域
如果我们想要截取页面里的特定区域，可以通过设置 options 中的 shotSize 参数来实现。例如：
-- -------------------- ---- -------
----- ------- - ----------------------------
----- ------- - -
--------- -
------ ---------
------- -----
-
--
------------------------------- ---------------- -------- -------- ----- -
-- ----- -
-----------------
- ---- -
---------------------
-
---该方法将产生一个 baidu-all.png 的图片，该图片包含网页的所有内容。
合并成全景图
如果我们想要将网页截图合并成为一个无缝的全景图片，可以使用 node-canvas 库中的 Canvas 方法。例如：
-- -------------------- ---- -------
----- ------- - ----------------------------
----- ------ - ------------------
----- ------- - -
--------- -
------ ----
------- -----
-
--
------------------------------- -------- ----- ------- -
-- ----- -
-----------------
- ---- -
----- ------ - --- ----------- ------
----- --- - ------------------------
----- --- - --- ---------------
------- - -------
------------------ -- ---
----------------------------------------------------------------------
-
---该方法使用 Canvas 在 Node.js 环境下绘制一个新的图片，将多个网页截图合并成一个全景的图片。
高级技巧
为网页增加限制
有时我们需要模仿屏幕大小而不是实际的网站宽度进行截图。有别于默认以屏幕大小截图，我们可以使用 windowSize 参数来模拟屏幕大小，如下所示：
-- -------------------- ---- -------
----- ------- - ----------------------------
----- ------- - -
----------- -
------ ----
------- ----
-
--
------------------------------- ----------------- -------- -------- ----- -
-- ----- -
-----------------
- ---- -
---------------------
-
---生成 PDF 文件
如果我们需要将网页保存为 PDF 文件，我们可以使用 PhantomJS PDF 封装器 来实现。该工具类似于 wkhtmltopdf 工具，需要首先安装 PhantomJS 和需要的字体，可以通过以下命令进行安装：
npm install phantomjs-prebuilt html-pdf
安装完成后，我们可以使用如下代码生成 PDF 文件：
-- -------------------- ---- -------
----- ------- - ----------------------------
----- --------- - --------------------
----- ------- - -
----------- -
------ ----
------- ----
-
--
------------------------------- -------- ----- ------- -
-- ----- -
-----------------
- ---- -
----- ---- - --------------------------
----- ---------- - ----- ---------------------------------------
---------------------------- ---------------------------- -------- ----- ---- -
-- ----- -
-----------------
- ---- -
---------------------
-
---
-
---该方法将生成一个名为 baidu.pdf 的文件，包含了网页渲染后的所有内容。
示例代码
- 截取整个页面并保存到本地
-- -------------------- ---- -------
----- ------- - ----------------------------
------------------------------- ------------ ------------- -
-- ----- -
-----------------
- ---- -
---------------------
-
---- 截屏特定区域并保存到本地
-- -------------------- ---- -------
----- ------- - ----------------------------
----- ------- - -
--------- -
------ ---------
------- -----
-
--
------------------------------- ---------------- -------- -------- ----- -
-- ----- -
-----------------
- ---- -
---------------------
-
---- 合并截屏成一个全景图
-- -------------------- ---- -------
----- ------- - ----------------------------
----- ------ - ------------------
----- ------- - -
--------- -
------ ----
------- -----
-
--
------------------------------- -------- ----- ------- -
-- ----- -
-----------------
- ---- -
----- ------ - --- ----------- ------
----- --- - ------------------------
----- --- - --- ---------------
------- - -------
------------------ -- ---
----------------------------------------------------------------------
-
---- 生成 PDF 文件
-- -------------------- ---- -------
----- ------- - ----------------------------
----- --------- - --------------------
----- ------- - -
----------- -
------ ----
------- ----
-
--
------------------------------- -------- ----- ------- -
-- ----- -
-----------------
- ---- -
----- ---- - --------------------------
----- ---------- - ----- ---------------------------------------
---------------------------- ---------------------------- -------- ----- ---- -
-- ----- -
-----------------
- ---- -
---------------------
-
---
-
---结语
本文介绍了 @tsofist/webshot 包的基本用法和一些高级技巧，可以帮助读者完成对网页的截图操作、生成 PDF 文件等。同时希望读者可以结合自己实际的应用场景，灵活运用上述技巧，将 @tsofist/webshot 包的强大截图能力发挥到极致。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730781e8991b448e930b