windows 使用 Phantom JS 将文件夹中的所有 HTML 文件转换为 PNG
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7531601/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Phantom JS to convert all HTML files in a folder to PNG
提问by JustADude
I've started using Phantom JS on Windows, but I'm having a bit of difficulty finding documentation on its capability (probably the root of my problem).
我已经开始在 Windows 上使用 Phantom JS，但是我很难找到有关其功能的文档（可能是我问题的根源）。
Using Phantom JS I would like to do the following:
使用 Phantom JS 我想做以下事情：
- Give it a local machine folder location,
- Have it navigate to that location and identify the list of HTML files,
- Once that list is identified to loop of the the list of HTML files and convert them all to PNG (similar to the way the rasterize.js example works), where the filename gsubs "HTML" with "PNG".
- 给它一个本地机器文件夹位置，
- 让它导航到该位置并识别 HTML 文件列表，
- 一旦该列表被识别为循环 HTML 文件列表并将它们全部转换为 PNG（类似于 rasterize.js 示例的工作方式），其中文件名 gsubs 带有“PNG”的“HTML”。
I'm sure this is probably possible, but I wasn't able to find the Phantom JS function call for:
我确定这可能是可能的，但我无法找到 Phantom JS 函数调用：
- getting the list of files in a folder and
- the format for gsub and grep in Phantom JS.
- 获取文件夹中的文件列表和
- Phantom JS 中 gsub 和 grep 的格式。
回答by Cameron Tinker
var page = require('webpage').create(), loadInProgress = false, fs = require('fs');
var htmlFiles = new Array();
console.log(fs.workingDirectory);
var curdir = fs.list(fs.workingDirectory);
// loop through files and folders
for(var i = 0; i< curdir.length; i++)
{
var fullpath = fs.workingDirectory + fs.separator + curdir[i];
// check if item is a file
if(fs.isFile(fullpath))
{
// check that file is html
if(fullpath.indexOf('.html') != -1)
{
// show full path of file
console.log('File path: ' + fullpath);
htmlFiles.push(fullpath);
}
}
}
console.log('Number of Html Files: ' + htmlFiles.length);
// output pages as PNG
var pageindex = 0;
var interval = setInterval(function() {
if (!loadInProgress && pageindex < htmlFiles.length) {
console.log("image " + (pageindex + 1));
page.open(htmlFiles[pageindex]);
}
if (pageindex == htmlFiles.length) {
console.log("image render complete!");
phantom.exit();
}
}, 250);
page.onLoadStarted = function() {
loadInProgress = true;
console.log('page ' + (pageindex + 1) + ' load started');
};
page.onLoadFinished = function() {
loadInProgress = false;
page.render("images/output" + (pageindex + 1) + ".png");
console.log('page ' + (pageindex + 1) + ' load finished');
pageindex++;
}
Hope this helps. For more information about the FileSystem calls, check this page out: http://phantomjs.org/api/fs/
希望这会有所帮助。有关 FileSystem 调用的更多信息，请查看此页面：http: //phantomjs.org/api/fs/
Also, I wanted to add, that I believe the FileSystem functions are only available in PhantomJS 1.3 or later. Please make sure to run the latestversion. I used PyPhantomJS for Windows but I'm sure this will work without a hitch on other systems as well.
另外，我想补充一点，我相信 FileSystem 函数仅在 PhantomJS 1.3 或更高版本中可用。请确保运行最新版本。我在 Windows 上使用了 PyPhantomJS，但我相信这在其他系统上也能顺利运行。
