phantomjs创建html,如何在Node.js中使用PhantomJS从网站或html创建屏幕截图
本文概述
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文件。
实现
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('
Hello World', '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
var link = links[i];
link.innerHTML = 'My custom text';
}
}
};
webshot('google.com', 'google.png', options, (err) => {
// screenshot now saved to google.png
});
请注意, 脚本将被序列化, 然后作为文本传递给Phantom, 因此所有变量作用域信息都将丢失。
编码愉快！