Làm cách nào để hiển thị một phần của trang bằng PhantomJS?

Question

Tôi muốn hiển thị các phần tử HTML riêng lẻ thành PNG bằng cách sử dụng Phantom.JS. Có ai biết nếu điều này là có thể? Ngoài ra, tôi sẽ sử dụng Phantom.js như thế nào để hiển thị một trang mà người dùng đã xem?

Answer 1

Để chỉ hiển thị một phần của trang bạn cần đặt thuộc tính clipRect cho trang và sau đó hiển thị nó.

var clipRect = document.querySelector(selector).getBoundingClientRect(); 
page.clipRect = { 
    top: clipRect.top, 
    left: clipRect.left, 
    width: clipRect.width, 
    height: clipRect.height 
}; 
page.render('capture.png'); 

Tôi không hiểu phần thứ hai của câu hỏi của bạn. Phantom.js không có nghĩa là không có hiển thị thực tế mà người dùng đang xem.

Answer 2

Tôi có nhu cầu tương tự, tôi đã cố gắng này và nó đã làm việc tốt cho tôi:

đừng quên các http://www trong URL

var page = require('webpage').create(); 
page.open('YourPageURL', function (status) { 

if (status !== 'success') { 
    console.log('Network Problem'); 
} else { 
    var p = page.evaluate(function() { 
     return document.getElementById('yourDivID').innerHTML 
    }); 
    console.log(p); 
} 
phantom.exit(); 
}); 

Answer 3

Bạn có thể sử dụng CasperJS, một dự án khác dựa trên PhantomJS.

casper.start('http://www.weather.com/', function() { 
    this.captureSelector('weather.png', '#wx-main'); 
}); 

casper.run(); 

Answer 4

Ví dụ làm việc.

var page = require('webpage').create(); 

page.open('http://google.com', function() { 
    // being the actual size of the headless browser 
    page.viewportSize = { width: 1440, height: 900 }; 

    var clipRect = page.evaluate(function(){ 
    return document.querySelector('#hplogo').getBoundingClientRect(); 
    }); 

    page.clipRect = { 
    top: clipRect.top, 
    left: clipRect.left, 
    width: clipRect.width, 
    height: clipRect.height 
    }; 

    page.render('google.png'); 
    phantom.exit(); 
}); 

Answer 5

Giải pháp dưới đây phù hợp với tôi.

var clipRect = document.querySelector(selector).getBoundingClientRect(); 
    page.clipRect = { 
       top: clipRect.top, 
       left: clipRect.left, 
       width: clipRect.width, 
       height: clipRect.height 
     }; 
    page.render('capture.png'); 

Nhưng tôi nhận thấy điều này chỉ hoạt động nếu chúng tôi hiển thị hình ảnh không phải là pdf. Để wokaround này cho pdf, hãy thử này

page.evaluate(function (element){ 
    $(element).appendTo('body'); 
    $('body > :not(' + element + ')').hide(); 
    }, element);  
    }); 

window.setTimeout(function(){ 
    page.render("page.pdf"); 
    },1000); 

liên kết này có thể giúp: How to hide all elements except one using jquery?

https://github.com/ariya/phantomjs/issues/10465