phantomjs

.NET 利用phantomjs javascript引擎抓取网页快照

phantomjs 它是个javascript引擎库，基于webkit内核，能够动态解析html及脚本
详细介绍请查看官网 点击此处

  • 下载phantomjs包，这次我们介绍的是用它截取网页快照，其实只用到了它js类库中的一个文件
    rasterize.js，先看看这个js里面的代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    var page = require('webpage').create(),
        address, output, size;
    if (phantom.args.length < 2 || phantom.args.length > 3) {
        console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat]');
        console.log('  paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
        phantom.exit();
    } else {
        address = phantom.args[0];
        output = phantom.args[1];
        page.viewportSize = { width: 600, height: 600 };
        if (phantom.args.length === 3 && phantom.args[1].substr(-4) === ".pdf") {
            size = phantom.args[2].split('*');
            page.paperSize = size.length === 2 ? { width: size[0], height: size[1], border: '0px' }
                                               : { format: phantom.args[2], orientation: 'portrait', border: '1cm' };
        }
        page.open(address, function (status) {
            if (status !== 'success') {
                console.log('Unable to load the address!');
            } else {
                window.setTimeout(function () {
                    page.render(output);
                    phantom.exit();
                }, 200);
            }
        });
    }

  • 根据phantomjs的语法 创建一个page对象，设置相关的参数然后发起一个请求，成功后渲染生成图片。
    接着看看后端如何调用这个js文件，这里我使用的C# winform 调用phantomjs.exe 程序，这个程序动态加载需要执行的js文件，其他语言也有相关的调用方法。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    private void GenerateImage(string url)
    {
         string links = url.IndexOf("http://") > -1 ? url : "http://" + url;
         Process p = new Process();
         p.StartInfo.FileName = Environment.CurrentDirectory + "//phantomjs.exe";
         p.StartInfo.WorkingDirectory = Environment.CurrentDirectory + "//pic//";
         p.StartInfo.Arguments = string.Format("--ignore-ssl-errors=yes --load-plugins=yes " + Environment.CurrentDirectory + "//rasterize.js  " + links + " " + url + ".png");
         p.StartInfo.CreateNoWindow = true;
         p.StartInfo.WindowStyle = ProcessWindowStyle.Hidden;
         if (!p.Start())
         {
             throw new Exception("无法启动Headless测试引擎.");
         }         
     }

效果图如下：
phantomjs 生成的快照图片