search

Home >php教程 >PHP源码 >使用phantomjs生成网站快照

使用phantomjs生成网站快照

PHP中文网
PHP中文网Original
2016-05-25 17:03:221221browse

昨天（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>

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();
});
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：根据给定的日期格式'YYYY-mm-dd',获取该日期所在周的起始日期Next article：getPhpContents

Related articles

See more