如果你正在开发前端应用程序并需要将 HTML 页面转换成图片，则可以使用 npm 包 webshot-html。Webshot-HTML 是一个 Node.js 模块，它可以捕获 HTML 页面并将其转换成 PNG、JPEG 或 PDF 文件。这篇文章将介绍如何在你的应用程序中使用 webshot-html。
安装 webshot-html
首先，你需要在你的项目中安装 webshot-html。使用以下命令：
npm install webshot-html
使用 webshot-html
安装 webshot-html 后，你就可以在你的代码中使用它。代码如下：
var webshot = require('webshot-html');
webshot('www.baidu.com', 'baidu.png', function(err) {
if (err) console.log(err);
console.log('Finished!');
});以上代码会将 https://www.baidu.com 的网页转换成 baidu.png 图片。如果想要将页面保存为 JPEG 或 PDF 文件，可以使用以下方法：
webshot('www.baidu.com', 'baidu.jpg', {format: 'jpg'}, function(err) {
// ...
});
webshot('www.baidu.com', 'baidu.pdf', {format: 'pdf'}, function(err) {
// ...
});webshot 函数接受四个参数：
url：要转换为图像或PDF的网站的URL。filename：生成的文件名称。options：可选参数，可使用格式选项来指定输出格式，也可设置要捕获的网页的大小、视口大小、截图类型等。callback：转换完成后执行的回调函数。
高级用法
webshot-html 还提供了一些高级用法来帮助你自定义转换过程。你可以使用自定义脚本和样式来自定义页面的外观，也可以添加水印和边框等。
-- -------------------- ---- -------
--- ------- - ------------------------
--- ------- - -
--------- -------
----- ------------------ ---------------------
----------- -
------ -----
------- ---
--
--------- -
------ ----
------- ---
--
---------- -------- - ----------------- ---- ---
------------- ------------------------------------ - ---------
--
---------------- ------------------ ------------- -
-- ---
---以上代码会在 baidu.png 图像的左上方添加一个 "hello world" 的文本。webshot 函数接受一个包含网页选项的对象，而不是网址。除了上文提到的选项外，还可以指定 useragent、cookies、windowPosition 等，可按照自己的需要来自定义选项。
结论
webshot-html 是一个很便捷的 npm 包，以它为基础可以快速地创建从 HTML 页面到图片和 PDF 文件的转换功能。它的高级选项还可以用来自定义生成图像的过程。如果你需要在你的应用程序中使用 webshot-html，请下载并开始使用它吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671068dd3466f61ffddfb