使用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

复制代码
 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     width: 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上,国内的有些网站访问不了。

你可能感兴趣的:(ant)