PhantomJS捕获移动浏览器的屏幕截图

Question

我试图用PhantomJS创建一个网页截图，但我将图像作为移动浏览器。我正在使用MAC OS优胜美地。这是我的JavaScript：

screen.js

var WebPage = require('webpage');
page = WebPage.create();
page.open('http://www.apple.com');
page.onLoadFinished = function() {
    window.setTimeout(function () {
        page.render('appleScreenShot' + '.png');
        phantom.exit();
    }, 2000);
}

这是我的命令行代码

phantomjs --ignore-ssl-errors=true --web-security=false --ssl-protocol=tlsv1 --debug=true screen.js

Answer 1

您可能会发现，您需要为某些网站指定viewportSize（甚至可能zoomFactor），具体取决于其资源中指定的媒体查询。

来自viewportSize的文档：

  

因为PhantomJS是无头的（没有显示任何内容），所以viewportSize   有效地模拟窗口的大小，就像传统的一样   浏览器。

示例用法：

page.viewportSize = {
    width: 1280,
    height: 800
};
page.zoomFactor = 1; //default value is 1

Answer 2

我建议你添加背景颜色渲染，因为默认是透明背景。

page.evaluate(function() {
    document.body.bgColor = 'white';
});

Answer 3

您可以将NightmareJs与节点一起使用：

const Nightmare = require('nightmare');
var nightmare = Nightmare({ show: false })
nightmare
  .useragent('Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36')
  .viewport(1200, 1800)
  .wait()
  .goto('url...')
  .wait()
  .screenshot('image.png')
  .end()
  .then(function (result) {
    console.log('page done');
 })
  .catch(function (error) {
    console.error('Error:', error);
 })

我发现屏幕截图比PhantomJs更容易使用

Answer 4

在Java中，我更改用户代理字符串。它对我有用。

DesiredCapabilities capabilities = new DesiredCapabilities();
        capabilities.setJavascriptEnabled(true);
        String userAgent = "Mozilla/5.0 (Windows NT 6.0) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.41 Safari/535.1";
 capabilities.setCapability(PhantomJSDriverService.PHANTOMJS_PAGE_SETTINGS_PREFIX + "userAgent", userAgent);
            driver = new PhantomJSDriver(capabilities);