Sử dụng Phantom JS để chuyển đổi tất cả các tệp HTML trong một thư mục thành PNG

Question

Tôi đã bắt đầu sử dụng Phantom JS trên Windows, nhưng tôi gặp khó khăn khi tìm tài liệu về khả năng của nó (có thể là gốc của sự cố của tôi).

Sử dụng Phantom JS Tôi muốn làm như sau:

1. Cho nó một vị trí thư mục máy tính cục bộ,
2. Có nó di chuyển đến vị trí đó và xác định danh sách các tập tin HTML,
3. Khi danh sách đó được xác định là vòng lặp của danh sách các tệp HTML và chuyển đổi tất cả thành PNG (tương tự như cách mà ví dụ rasterize.js hoạt động), trong đó tên tệp gsubs "HTML" có "PNG".

Tôi chắc chắn điều này có lẽ có thể, nhưng tôi đã không thể tìm ra Phantom JS gọi hàm cho:

1. nhận được danh sách các tập tin trong một thư mục và
2. định dạng cho gsub và grep trong Phantom JS.

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

Hy vọng điều này helps. Để biết thêm thông tin về các cuộc gọi FileSystem, hãy xem trang này: http://phantomjs.org/api/fs/

Ngoài ra, tôi muốn thêm, tôi tin rằng các chức năng FileSystem chỉ khả dụng trong PhantomJS 1.3 trở lên. Vui lòng đảm bảo chạy phiên bản latest. Tôi đã sử dụng PyPhantomJS cho Windows nhưng tôi chắc chắn rằng điều này sẽ hoạt động mà không bị cản trở trên các hệ thống khác.