使用phantomjs生成網站快照

時間 2019-11-17

原文原文鏈接

昨天（2013/08/12）在代碼區看到一個生成站點快照的代碼，看了半天才發現，做者僅僅貼出來業務代碼，最核心的生成快照圖片的代碼反而沒有給出來。之前記得google搜索提供站點縮略圖的現實，那時候以爲好神奇，可是沒有花時間去作深刻的調研。昨天又遇到了，那就順便調研下吧。php

纔開始找到了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。 html

放棄了wkhtmltoimage，繼續找到了phantomjs和slimerjs，兩款都是服務器端的js，簡單理解，都是封裝了瀏覽器解析引擎，不一樣是phantomjs封裝的webkti，slimerjs封裝的是Gecko（firefox）。權衡利弊，決定研究下phantomjs，因而就用phantomjs實現了網站快照生成。phantomjs的項目地址是：http://phantomjs.org/ jquery

代碼涉及兩個部分，一個是設計業務的index.php，另外一個是生成快照的js腳本snapshot.js。代碼比較簡單，僅僅是實現了功能，沒有作過多的修飾。代碼分別以下所示： web

index.php ajax

 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.jscentos

 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 });