使用Phantom JS将文件夹中的所有HTML文件转换为PNG

Question

我已经开始在Windows上使用Phantom JS，但在查找其功能（可能是我的问题的根源）方面存在一些问题。

使用虚拟JS我想做到以下几点：

1. 给它一个本地机文件夹位置，
2. 有它导航到该位置并识别HTML文件列表中，
3. 一旦该列表被标识为HTML文件列表的循环，并将它们全部转换为PNG（类似于rasterize.js示例的工作方式），其中文件名gsubs“HTML”和“PNG”。

我敢肯定，这可能是可能的，但我没能找到幻影JS函数调用：

1. 获取文件夹中的文件列表，并
2. 格式在Phantom JS中用于gsub和grep。

Answer 1

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++; 
} 

希望这helps。有关FileSystem调用的更多信息，请查看此页面：http://phantomjs.org/api/fs/

另外，我想补充一点，我相信FileSystem函数仅在PhantomJS 1.3或更高版本中可用。请确保运行latest版本。我在Windows上使用了PyPhantomJS，但我相信这样也可以在其他系统上顺利运行。