使用phantomjs生成网站快照-PHP源码-php.cn

使用phantomjs生成网站快照

PHP中文网

Freigeben： 2016-05-25 17:03:22

Original

1245 Leute haben es durchsucht

昨天（2013/08/12）在代码区看到一个生成站点快照的代码，看了半天才发现，作者仅仅贴出来业务代码，最核心的生成快照图片的代码反而没有给出来。以前记得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。代码比较简单，仅仅是实现了功能，没有做过多的修饰。代码分别如下所示：

index.php

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

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

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

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

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

            return false;
        });
    });
    </script>
</body>
</html>

Nach dem Login kopieren

snapshot.js

var page = require(&#39;webpage&#39;).create();
var args = require(&#39;system&#39;).args;

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

page.open(url, function () {
    page.render(filename);
    phantom.exit();
});

Nach dem Login kopieren