现在的位置: 首页 > PHP开发 > 正文
使用phantomjs生成网站快照
2014年02月10日 PHP开发 ⁄ 共 2796字 暂无评论 ⁄ 被围观 3,163 views+

在代码区看到一个生成站点快照的代码,看了半天才发现,作者仅仅贴出来业务代码,最核心的生成快照图片的代码反而没有给出来。 以前记得google搜索提供站点缩略图,那时候觉得好神奇,但是没有花时间去做深入的调研。昨天又遇到了,那就顺便调研下吧。

才开始找到了wkhtmltopdf这款工具,这款工具的地址是:http://code.google.com/p/wkhtmltopdf/。 这款工具集下有一个wkhtmltoimage,可以用来生成站点快照。才开始在基于xen的虚拟机上跑,操作系统是centos,各种问题,折腾到最后实在没精力折腾了。
查到后来,看到老外一篇文章,发现wkhtmltoimage对于运行xen虚拟机的系统支持的并不好,具体情况可以参见这篇文章:http://blog.behance.net/dev/wkhtmltopdf-wkhtmltoimage-x-centos-x-xen-segfault-mania。

放弃了wkhtmltoimage,继续找到了phantomjs和slimerjs,两款都是服务器端的js,简单说来,都是封装了浏览器解析引擎,不同是phantomjs封装的webkti,slimerjs封装的是Gecko(firefox)。 权衡利弊,决定研究下phantomjs,于是就用phantomjs实现了网站快照生成。phantomjs的项目地址是:http://phantomjs.org/

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


1. [代码][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>
* {
    margin0;
    padding0;
}
form {
    padding20px;
}
div {
    margin20px 0 0;
}
input {
    width200px;
    padding4px 2px;
}
#placeholder {
    displaynone;
}
</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);
                }
            });
            return false;
        });
    });
    </script>
</body>

</html>


2. [代码][JavaScript]代码 

<script>
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();
});
</script>

给我留言

您必须 [ 登录 ] 才能发表留言!