如何在Node.js中使用PhantomJS从网站或html创建屏幕截图 _PhantomJS

本文概述

要求
实现
Webshots选项
PhantomJS回调

PhantomJS是一款无头WebKit, 可使用JavaScript API多平台编写脚本, 可在以下主要操作系统上使用：Windows, Mac OS X, Linux和其他Unices。它具有对各种Web标准的快速本机支持：DOM处理, CSS选择器, JSON, Canvas和SVG。
在本文中, 你将学习如何使用webshot模块通过Node.js操作PhantomJS CLI。
要求你将需要可从PATH访问的PhantomJS(已安装或独立发行版)(在此处了解如何向Windows中的PATH添加变量)。如果路径中没有该文件, 可以稍后在配置中为PhantomJS指定可执行文件。
你可以从官方网站的下载区域的每个平台(Windows, Linux, MacOS等)的以下列表中获取PhantomJS。
注意：大多数平台上没有安装过程, 因为你将获得带有两个文件夹, examples和bin(包含PhantomJS可执行文件)的.zip文件。
实现【如何在Node.js中使用PhantomJS从网站或html创建屏幕截图】PhantomJS是命令行工具(CLI), 因此我们需要通过子进程将此实用程序与Node.js一起使用。但是, 我们也不会重新发明轮子, 你也不会, 为了使我们轻松完成此任务, 请使用第三方模块, 在这种情况下, 我们正在谈论的是node-webshot模块。 Node Webshot提供了用于获取网页屏幕截图的简单API。该模块是PhantomJS的轻包装, 它利用WebKit执行页面渲染。
要在你的项目中安装此模块, 请在终端中执行以下命令：

npm install webshot

注意：但是, webshot模块在你的project / node_modules / phantomjs-prebuilt / lib / phantom / bin / phantomjs.exe中具有作为依赖项包含的phantomjs的预构建, 如果没有提供任何phantomPath, 则会自动使用它。无需任何配置即可使用webshot。
如果需要使用– save参数, 请将其保存在项目中。安装后, 你将可以使用require(‘ webshot’ )要求该模块。
如前所述, 你需要可从命令行访问phantomjs, 以防万一, 请通过提供phantomPath选项指定可执行文件的完整路径：

var webshot = require('webshot'); var options = {phantomPath: "C:\\Users\\sdkca\\Desktop\\phantomjs-2.1.1-windows\\bin\\phantomjs.exe"}; // Use webshot here with the options object as third parameter// Example :webshot('google.com', 'google.png', options, (err) => {// screenshot now saved to google.png});

Webshot尝试使用phantomjs NPM模块提供的二进制文件, 如果该模块不可用, 则退回到phantomPath。
从网站创建屏幕截图
你可以从任何网站创建屏幕截图, 只需提供网站URL作为第一个参数, 并提供输出文件作为第二个参数：

var webshot = require('webshot'); webshot('ourcodeworld.com', 'ourcodeworld-image.png', options, (err) => {if(err){console.log("An error ocurred ", err); }// screenshot now saved to ourcodeworld-image.png});

从html文件或纯html字符串创建屏幕截图
你可以使用html字符串创建屏幕截图, 只需在第一个参数中提供标记作为字符串, 在第二个参数中提供输出文件名, 然后在使用纯html的选项中指定即可：

var webshot = require('webshot'); var options = {siteType:'html'}; webshot('< html> < body> Hello World< /body> < /html> ', 'hello_world.png', options, (err) => {// screenshot now saved to hello_world.png});

你可以通过将siteType设置为file来从html文件创建屏幕快照, 并提供webshot函数的第一个参数作为文件的绝对路径：

var webshot = require("webshot"); var options = {siteType: "file"}; webshot("index.html", "ourcodeworld-file.png", options, (err) => {if(err){return console.log(err); }console.log("Image succesfully created"); });

或者, 你可以使用文件系统模块读取文件的内容, 并将siteType设置为html：

var webshot = require('webshot'); var fs = require("fs"); var options = {siteType:'html'}; webshot(fs.readFileSync("index.html", "UTF-8"), 'hello_world.png', options, (err) => {// screenshot now saved to hello_world.png});

你可以在对象中设置更多选项, 请在此处查看存储库文档中的可用选项。
更改屏幕截图的格式
生成的屏幕截图格式可以是png, jpg或jpeg。要更改输出格式, 请使用具有以下格式的字符串设置streamType(还要注意, 输出文件名必须具有相同的扩展名)：

var webshot = require("webshot"); var options = {streamType: "jpeg"}; webshot("ourcodeworld.com", "ourcodeworld-file.jpeg", options, (err) => {if(err){return console.log(err); }console.log("Image succesfully created"); });

Webshots选项用与PhantomJS的CLI相同的方式, 可以在webshot模块(和PhantomJS)的对象中动态设置选项。下表显示了webshot和PhantomJS的所有可用选项：

选项	默认值	描述
windowSize	{宽度：1024, 高度：768}	浏览器窗口的尺寸。 screenSize是此属性的别名。
shotSize	{width：’ window’ , height：’ window’ }	从左上角开始渲染的页面文档区域。可能的值为” 屏幕” , “ 全部” 以及定义像素长度的数字。 ‘ window’ 导致将长度设置为窗口的长度(即镜头显示了浏览器窗口中最初可见的内容)。 “ 全部” 导致将长度设置为沿给定维度的文档长度。
shotOffset	{左：0, 右：0, 上：0, 下：0}	左右偏移量定义屏幕快照矩形的左上角。右侧和底部偏移量允许从shotSize尺寸中删除像素(例如, shotSize高度为” all” 且底部偏移量为30会导致渲染站点上除最后30行以外的所有像素)。
幻影路径	‘ phantomjs’	phantomjs的位置。 Webshot尝试使用phantomjs NPM模块提供的二进制文件, 如果该模块不可用, 则回退到” phantomjs” 。
phantomConfig	{}	具有与phantomjs命令行选项相对应的键值对的对象。不要包含`– `。例如：`phantomConfig：{‘ ignore-ssl-errors’ ：’ true’ }`
饼干	[]	要使用的cookie对象的列表, 或者为null以禁用cookie。
customHeaders	null	HTTP请求中要发送的所有其他标头。
defaultWhiteBackground	false	截屏时, 如果未在其他地方定义, 请添加白色背景。
自定义CSS	”	截屏时, 请添加自定义CSS规则(如果已定义)。
质量	75	JPEG压缩质量。较高的数字看起来会更好, 但是会创建较大的文件。流式传输时, 质量设置无效。
streamType	‘ png’	如果使用流式传输, 则这将指定流式渲染的文件格式。可能的值为” png” , ” jpg” 和” jpeg” 。
siteType	网址	siteType指示是否需要请求内容(” URL” ), 在本地加载内容(“ 文件” )还是直接以字符串形式提供内容(” html” )。
renderDelay	0	页面加载后要截屏之前等待的毫秒数。
超时	0	终止phantomjs进程并假定webshotting失败之前要等待的毫秒数。 (0无超时。)
takeShotOnCallback	false	等待网页发信号通知网络快照何时使用window.callPhantom(‘ takeShot’ ); 拍照。
errorIfStatusIsNot200	false	如果加载的页面的状态代码不是200, 请不要截屏, 请输入错误信息。
errorIfJSException	false	如果页面上的脚本引发异常, 请不要截屏, 而应引起错误。
captureSelector	false	捕获包含提供的选择器的页面区域并将其保存到文件。

PhantomJS回调可以使用Phantom的任何页面回调(例如onLoadFinished或onResourceRequested)在呈现页面之前在页面上运行任意脚本。例如, 下面的脚本更改页面上每个链接的文本：

var webshot = require('webshot'); var options = {onLoadFinished: function() {var links = document.getElementsByTagName('a'); for (var i=0; i< links.length; i++) {var link = links[i]; link.innerHTML = 'My custom text'; } }}; webshot('google.com', 'google.png', options, (err) => {// screenshot now saved to google.png});

请注意, 脚本将被序列化, 然后作为文本传递给Phantom, 因此所有变量作用域信息都将丢失。
编码愉快！