yesterday (2013/08/12) in the code area to see a snapshot of the code generated site, looked a long time only to find, just stick out of business code, the core generates a snapshot picture of the code but did not give up. Google search before providing site thumbnails remember the reality, then feel good magic, but did not take the time to do in-depth research. Yesterday they met, then the way research under the bar.
began to find wkhtmltopdf this tool, this tool's address is: http://code .google.com / p / wkhtmltopdf / . This tool set under a wkhtmltoimage, the site can be used to generate a snapshot. Began in the xen virtual machine running, the operating system is centos, various issues, it did not go through to the final toss toss.
found later, saw an article foreigner found wkhtmltoimage xen virtual machine running on the system of support is not good, you can refer to the specific circumstances of this article: http://blog.behance.net/dev/wkhtmltopdf-wkhtmltoimage-x-centos-x- xen-segfault-mania .
abandoned wkhtmltoimage, continue to find phantomjs and slimerjs, two are server-side js, simple to understand, are encapsulated browser parsing engine, different is phantomjs package webkti, slimerjs package is Gecko (firefox). On balance, decided to study under phantomjs, so he used to achieve a site phantomjs snapshot generation. phantomjs project address is: http://phantomjs.org/
code involves two parts, one is the design business index.php, the other is generated snapshots js script snapshot.js. Code is relatively simple, just to achieve the function, did not do too much modification. Codes are as follows:
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 });
above code demonstrates the use cases at the following address:
http://static.miaowu.cc / snapshot /
above code on American vps on some sites can not visit the country.
没有评论:
发表评论