srcmini本文概述
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('<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, 因此所有变量作用域信息都将丢失。
编码愉快！
评论前必须登录！
注册