使用phantomjs生成网站快照

http://phantomjs.org/

昨天（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['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);
                 }
             });

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

上面的代码的演示用例的地址如下： http://static.miaowu.cc/snapshot/

上面的代码放在美国的vps上，国内的有些网站访问不了。