使用phantomjs生成网站快照
昨天（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
1 <?php 2 if (isset($_GET['url'])) 3 { 4 set_time_limit(0); 5 6 $url = trim($_GET['url']); 7 $filePath = "./cache/".md5($url).'.png'; 8 9 if (is_file($filePath)) 10 { 11 exit($filePath); 12 } 13 14 $command = "phantomjs/bin/phantomjs snapshot.js {$url} {$filePath}"; 15 exec($command); 16 17 exit($filePath); 18 } 19 ?> 20 21 <!DOCTYPE html> 22 <html> 23 <head> 24 <meta charset="utf-8" /> 25 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 26 <meta name="keywords" content="" /> 27 <meta name="description" content="" /> 28 <title>快照生成</title> 29 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 30 <style> 31 * { 32 margin: 0; 33 padding: 0; 34 } 35 36 form { 37 padding: 20px; 38 } 39 40 div { 41 margin: 20px 0 0; 42 } 43 44 input { 45 200px; 46 padding: 4px 2px; 47 } 48 49 #placeholder { 50 display: none; 51 } 52 </style> 53 </head> 54 55 <body> 56 <form action="" id="form"> 57 <input type="text" id="url" /> 58 <button type="submit">生成快照</button> 59 60 <div> 61 <img src="" alt="" id="placeholder" /> 62 </div> 63 </form> 64 65 <script> 66 $(function(){ 67 $('#form').submit(function(){ 68 if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true) 69 { 70 alert('正在生成网站快照，请耐心等待...'); 71 return false; 72 } 73 74 $(this).data('generate', true); 75 $('button').text('正在生成快照...').attr('disabled', true); 76 77 $.ajax({ 78 type: 'GET', 79 url: '?', 80 data: 'url=' + $('#url').val(), 81 success: function(data){ 82 $('#placeholder').attr('src', data).show(); 83 $('#form').data('generate', false); 84 $('button').text('生成快照').attr('disabled', false); 85 } 86 }); 87 88 return false; 89 }); 90 }); 91 </script> 92 </body> 93 </html>
snapshot.js
1 var page = require('webpage').create(); 2 var args = require('system').args; 3 4 var url = args[1]; 5 var filename = args[2]; 6 7 page.open(url, function () { 8 page.render(filename); 9 phantom.exit(); 10 });
上面的代码的演示用例的地址如下：
http://static.miaowu.cc/snapshot/
上面的代码放在美国的vps上，国内的有些网站访问不了。
