2011-09-23 12 views
10

Comencé a utilizar Phantom JS en Windows, pero tengo dificultades para encontrar documentación sobre su capacidad (probablemente la raíz de mi problema).Usando Phantom JS para convertir todos los archivos HTML en una carpeta a PNG

Usando Phantom JS me gustaría hacer lo siguiente:

  1. Darle una ubicación de carpeta máquina local,
  2. Haz lo que vaya a ese lugar e identificar la lista de archivos HTML,
  3. vez esa lista está identificada con un bucle de la lista de archivos HTML y los convierte a todos en PNG (similar a la forma en que funciona el ejemplo rasterize.js), donde el nombre del archivo gsubs "HTML" con "PNG".

Estoy seguro que esto es probable que sea posible, pero no era capaz de encontrar la llamada de función Phantom JS para:

  1. conseguir la lista de archivos en una carpeta y
  2. el formato para gsub y grep en Phantom JS.

Respuesta

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

Esperanza esta helps. Para obtener más información sobre las llamadas al FileSystem, consulte esta página: http://phantomjs.org/api/fs/

Además, quería agregar que creo que las funciones de FileSystem solo están disponibles en PhantomJS 1.3 o posterior. Asegúrese de ejecutar la versión latest. Usé PyPhantomJS para Windows, pero estoy seguro de que esto funcionará sin problemas en otros sistemas también.

+0

De alguna manera solo obtengo 'PNG' en blanco con su script. Añadiendo 'console.log (page.content);' en 'page.onLoadFinished' returns' 'no importa que el contenido HTML real sea ... ¿Alguna sugerencia? Phantomjs v1.9.2 – AvL

+0

¿Está seguro de que sus páginas se están cargando completamente antes de intentar tomar instantáneas? –

+0

También revisé 'status'. Ver mi pregunta: http://stackoverflow.com/questions/19939046/phantomjs-fails-to-open-local-file – AvL

Cuestiones relacionadas