做有态度的前端团队

网易FEG前端团队

使用PhantomJS对网页截屏

PhantomJS 可以看做是一个没有UI界面的webkit浏览器,这个东西用途很广泛,可以用来做网络监控,网页截屏,自动化测试等等,这里抛砖引玉,做个简单的介绍,就主要介绍下它截图的这功能。

1.安装

官网下载phantomjs.exe,然后复制文件所在路径D:\chrome download\phantomjs-2.1.1-windows\bin(这个是我的路径) ,在环境变量的系统变量中找到path,添加即可,这样就可以在任意地方执行CMD命令操作PhantomJS了。

2.使用

demo.js

var page = require('webpage').create();//创建网页对象

page.open('http://game.163.com', function(status) {
    if (status !== 'success') {
        console.log('Unable to load the address!')
    } else {
        page.render('a.jpg');//导出a.jpg
        phantom.exit();//退出程序
    }
})

在CMD命令行窗口输入 phantomjs demo.js,就可以导出game.163.com的截图了。这样我们在没有打开浏览器的情况就知道它页面长什么样了~

1.png

看截下来的图,会发现一些问题,截图宽度是1260,显示不全,最明显的是中间一块有留白。留白原因是有些页面可能是做了lazyload,需要滚动到相应的位置才会触发。下面进一步调整解决这个问题,这样就能看到完整的截图了,这里就不贴图了。

var page = require('webpage').create();//创建网页对象

page.viewportSize = { width: 1920, height: 100 };//高度可以随意给个值
page.open('http://game.163.com', function(status) {
    if (status !== 'success') {
        console.log('Unable to load the address!')
    } else {
        page.evaluate(function(){
            scrollTo(0, 10000); //给个足够大的值滚动到底部
        })
        //也可以截取某个区域
        // page.clipRect = { 
        //  top: 0,
        //  left: 0,
        //  width: 1920,// 宽度
        //  height: 400 //高度
        // }
        setTimeout(function() {
            page.render('a.jpg', { //导出a.jpg
                format: 'jpg',
                quality: '100' //对比发现默认好像不是100,设置为100截图更清晰
            });
            phantom.exit(); //退出程序
        }, 1000);
    }
})

我们还可以在page.evaluate中的函数里对页面做一些操作,比如Dom操作...这里遍历了页面上所有的a元素,然后加个border,最后我们可以把这个效果截图导出来~

    ...
    page.evaluate(function() {
        scrollTo(0, 10000); //给个足够大的值滚动到底部
        var aList = document.querySelectorAll("a");
        [].forEach.call(aList,function(a){
          a.style.border="1px solid red";
        })
    });
    ...

2.png

System Module

下面将使用system模块提供的args。

  • system.args {String[]} 获取运行phantomjs时传入的所有参数

从上面的介绍看,很多东西都是写死的,比如图片大小的设置,url,图片名称等等。我们可以使用system.args来代替这些。

var page = require('webpage').create(),
    address, output, sizeX , sizeY;
var system = require('system');

var arg_count = system.args.length;
if (arg_count !=  5) {
    console.log('Usage: **.js URL filename sizeX sizeY');
    phantom.exit();
} else {

    address = system.args[1];
    output = system.args[2];
    sizeX = system.args[3];
    sizeY = system.args[4];
    page.viewportSize = {
        width: sizeX,
        height: sizeY
    };
    page.open(address, function(status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            page.evaluate(function() {
                  scrollTo(0, 10000); //给个足够大的值滚动到底部
            });
            setTimeout(function() {
                page.render(output, {
                    format: 'jpg',
                    quality: '100' //对比发现默认好像不是100,设置为100截图更清晰
                });
                phantom.exit();
            }, 1000);
        }
    });
}

我们试下对梦幻官网截屏,输入CMD命令,其中demo.js就是第一个参数,以此类推...

phantomjs demo.js http://my.163.com bg.jpg 1920 1000

观察导出的效果图,又发现问题了,第一,有个黑色透明弹层(不支持flash,视频没显示出来,这问题忽略)。第二,可以看到中间一块是黑色的。我想拿到一开始没有视频弹窗,而且中间的一块不会出现黑色的截图,怎么办?(温馨提示:如果你看到页面不是这样,梦幻官网有可能改版了~)
3.png

addCookie

Phantomjs有操作Cookie的一些API。

  • addCookie(Object) {Boolean}

这个是官网的一个例子

phantom.addCookie({
  'name': 'Added-Cookie-Name',
  'value': 'Added-Cookie-Value',
  'domain': '.google.com'
});

梦幻官网现在有这样的一个逻辑,当你第一次访问的时候,会有个判断,如果没有相关的Cookie,就会出现视频弹窗,然后下次访问就没有了。一开始,我们可以手动种一下Cookie,去掉这个视频弹窗,然后最后截取到没有透明黑色弹层的页面。

梦幻官网,打开开发者工具,找到这个cookie

12.png

具体代码如下:

var page = require('webpage').create(),
    address, output, sizeX , sizeY;
var system = require('system');

var arg_count = system.args.length;
if (arg_count != 5) {
    console.log('Usage: **.js URL filename sizeX sizeY');
    phantom.exit();
} else {

    address = system.args[1];
    output = system.args[2];
    sizeX = system.args[3];
    sizeY = system.args[4];

    page.viewportSize = {
        width: sizeX,
        height: sizeY
    };
    phantom.addCookie({
        'name': 'myVideoPop',
        'value': '1',
        'domain': 'my.163.com'
    });
    page.open(address, function(status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {

            page.evaluate(function() {
                scrollTo(0, 10000); 
            });
            setTimeout(function() {
                page.render(output, {
                    format: 'jpg',
                    quality: '100'
                });
                phantom.exit();
            }, 1000);
        }
    });
}

这次导出的效果图:

11.png

可以看到黑色透明弹层终于没了,还剩最后一个问题,为啥那块是黑色的呢,原因也简单,因为没有背景色,需要我们加个背景色,然后就可以去掉黑块了。这问题官网给了答案。

Q: When using render(), why is the background transparent?

A: PhantomJS does not set the background color of the web page at all, it is left to the page to decide its background color. If the page does not set anything, then it remains transparent.

To set an initial background color for a web page, use the following trick:

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

手机阅读请扫描下方二维码:

已有 99 条评论

  1. floyd

    PhantomJS这个玩意确实挺有用的~~特别在监控页面异常方面,可以往自动化测试页面这方面去想想~~ ali-59.gif

  2. dayday

    page.evaluate(function() {
    scrollTo(0, 10000); //给个足够大的值滚动到底部
    });
    好像有最大限制,超过了某个值就没有效果了 ali-45.gif

    1. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    2. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif
      expr 810295592 + 876073759

    3. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif |expr 830181050 + 991633049

    4. 12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    5. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif $(expr 814367610 + 932867415)

    6. admin

      clybqxpmlatyioxjtvfx

    7. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif &set /A 833871241+967437373

    8. admin

      ${@var_dump(md5(370487724))};

    9. admin%0d%0aCRLF-Header:CRLF-Value

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    10. admin

      '-var_dump(md5(512870547))-'

    11. clybqxpmlatyioxjtvfx

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    12. admin

      /1/{{989571828+918335975}}

    13. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    14. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    15. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    16. admin

      12345678 ali-40.gif ali-40.gif ali-40.gif ali-40.gif ali-40.gif

  3. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  4. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  5. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  6. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  7. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  8. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  9. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  10. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  11. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  12. 12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  13. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  14. admin|expr 935549181 + 997819800

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  15. 58

    ali-48.gif ali-48.gif ali-48.gif ali-48.gif ali-48.gif

  16. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  17. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  18. 1

    555

  19. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  20. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  21. 1

    1

  22. 1

    1

  23. 1

    555

  24. 1

    1

  25. 1

    1

  26. 1

    1

  27. 1

    1

  28. 1

    1

  29. 1

    1

  30. 1

    555

  31. 1

    1

  32. 1

    1

  33. 1

    555

  34. 1

    1

  35. 1

    555

  36. 1

    1

  37. 1

    1

  38. 1

    1

  39. 1

    1

  40. 1

    1

  41. 1

    1

  42. 1

    1

  43. 1

    1

  44. 1

    1

  45. 1

    1

  46. 1

    1

  47. 1

    1

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif