Phantom JS 一个服务器端的 JavaScript API 的 WebKit

Phantom JS是一个服务器端的 JavaScript API 的 WebKit。其支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG

使用场景：

  • 无需浏览器的 Web 测试

  • 页面访问自动化

  • 屏幕捕获 

  • 网络监控

屏幕捕获示例代码：

var page = require('webpage').create();
page.open('http://github.com/', function() {
  page.render('github.png');
  phantom.exit();
});

PhantomJS 生态环境：

  • CasperJS enables easy navigation scripting and common high-level testing.

  • Poltergeist allows running Capybara tests headlessly.

  • Guard::Jasmine automatically tests Jasmine specs on Rails when files are modified.

  • GhostDriver complements Selenium tests with a PhantomJS WebDriver implementation.

  • PhantomRobot runs Robot Framework acceptance tests in the background via PhantomJS.

  • Mocha-PhantomJS run Mocha tests using PhantomJS.

其他一些相关项目

 

代码涉及两个部分，一个是设计业务的index.php，另一个是生成快照的js脚本snapshot.js。代码比较简单，仅仅是实现了功能，没有做过多的修饰。代码分别如下所示：

index.php

<?php
    if (isset($_GET['url']))
    {
        set_time_limit(0);

        $url = trim($_GET['url']);
        $filePath = "./cache/".md5($url).'.png';

        if (is_file($filePath))
        {
            exit($filePath);
        }

        $command = "phantomjs/bin/phantomjs snapshot.js {$url} {$filePath}";
        exec($command);

        exit($filePath);
    }
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>快照生成</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
* {
    margin: 0;
    padding: 0;
}

form {
    padding: 20px;
}

div {
    margin: 20px 0 0;
}

input {
    width: 200px;
    padding: 4px 2px;
}

#placeholder {
    display: none;
}
</style>
</head>

<body>
    <form action="" id="form">
        <input type="text" id="url" />
        <button type="submit">生成快照</button>

        <div>
            <img src="" alt="" id="placeholder" />
        </div>
    </form>

    <script>
    $(function(){
        $('#form').submit(function(){
            if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true)
            {
                alert('正在生成网站快照，请耐心等待...');
                return false;
            }

            $(this).data('generate', true);
            $('button').text('正在生成快照...').attr('disabled', true);

            $.ajax({
                type: 'GET',
                url: '?',
                data: 'url=' + $('#url').val(),
                success: function(data){
                    $('#placeholder').attr('src', data).show();
                    $('#form').data('generate', false);
                    $('button').text('生成快照').attr('disabled', false);
                }
            });

            returnfalse;
        });
    });
    </script>
</body>
</html>

 


snapshot.js

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

var url = args[1];
var filename = args[2];

page.open(url, function () {
    page.render(filename);
    phantom.exit();
});
posted @ 2017-05-24 10:42  luckc#  阅读(167)  评论(0)    收藏  举报