当前位置:首页 > linux教程 > 列表

基于linnux+phantomjs实现生成图片格式的网页快照

发布:smiling 来源: PHP粉丝网  添加日期:2021-05-22 15:38:23 浏览: 评论:0 

在代码区看到一个生成站点快照的代码,看了半天才发现,作者仅仅贴出来业务代码,最核心的生成快照图片的代码反而没有给出来。 以前记得google搜索提供站点缩略图,那时候觉得好神奇,但是没有花时间去做深入的调研。昨天又遇到了,那就顺便调研下吧。

安装扩展:

(1)下面是我在linux上的安装过程,如果没有安装git请先yum install git

安装casperjs,代码如下:

  1. cd / 
  2. git clone git://github.com/n1k0/casperjs.git 
  3. cd casperjs 
  4. ln -sf /casperjs/bin/casperjs /usr/local/bin/casperjs  //可以忽略 实际执行中php是执行 /casperjs/bin/casperjs 

(2)安装phantomjs,下载地址:http://phantomjs.org/download.html

下载后操作很简单,直接把解压好的\bin\phantomjs移动到\usr\local\bin\phantomjs就可以了。\

测试phantomjs --version 有结果不报错,说明安装OK

(3)安装字体

1. 首先获得一套“微软雅黑”字体库(Google一下一大把),包含两个文件msyh.ttf(普通)、msyhbd.ttf(加粗);

2. 在/usr/share/fonts目录下建立一个子目录,例如win,命令如下:

# mkdir /usr/share/fonts/win

3. 将msyh.ttf和msyhbd.ttf复制到该目录下,例如这两个文件放在/root/Desktop下,使用命令:

# cd /root/Desktop

# cp msyh.ttf msyhbd.ttf  /usr/share/fonts/win/

4. 建立字体索引信息,更新字体缓存:

  1. # cd /usr/share/fonts/win 
  2.        # mkfontscale  (如果提示 mkfontscale: command not found,需自行安装 # yum install mkfontscale ) 
  3.        # mkfontdir 
  4.        # fc-cache    (如果提示 fc-cache: command not found,则需要安装# yum install fontconfig ) 

至此,字体已经安装完毕!

  1. <?php  
  2.   if (isset($_GET['url']))  
  3.   {  
  4.     set_time_limit(0);  
  5.     
  6.     $url = trim($_GET['url']);  
  7.     $filePath = md5($url).'.png';  
  8.     if (is_file($filePath))  
  9.     {  
  10.       exit($filePath);  
  11.     }  
  12.    
  13.     //如果不加这句就会报错“Fatal: [Errno 2] No such file or directory; did you install phantomjs?”,详情参考http://mengkang.net/87.html 
  14.     putenv("PHANTOMJS_EXECUTABLE=/usr/local/bin/phantomjs"); 
  15.     $command = "phantomjs phantomjs.js {$url} {$filePath}";  
  16.     @exec($command);  
  17.     
  18.     exit($filePath);  
  19.   }  
  20. ?>  
  21.     
  22. <!DOCTYPE html>  
  23. <html>  
  24. <head>  
  25. <meta charset="utf-8" />  
  26. <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
  27. <meta name="keywords" content="" />  
  28. <meta name="description" content="" />  
  29. <title>快照生成</title>  
  30. <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>  
  31. <style>  
  32. * {margin: 0; padding: 0; } form {padding: 20px; } div {margin: 20px 0 0; } input {width: 200px; padding: 4px 2px; } #placeholder {display: none; }  
  33. </style> 
  34. </head>  
  35.     
  36. <body>  
  37.   <form action="" id="form">  
  38.     <input type="text" id="url" />  
  39.     <button type="submit">生成快照</button>  
  40.     
  41.     <div>  
  42.       <img src="" alt="" id="placeholder" />  
  43.     </div>  
  44.   </form>  
  45.   <script>  
  46.   $(function(){  
  47.     $('#form').submit(function(){  
  48.       if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true)  
  49.       {  
  50.         alert('正在生成网站快照,请耐心等待...');  
  51.         return false;  
  52.       }  
  53.     
  54.       $(this).data('generate', true);  
  55.       $('button').text('正在生成快照...').attr('disabled', true);  
  56.     
  57.       $.ajax({  
  58.         type: 'GET',  
  59.         url: '?',  
  60.         data: 'url=' + $('#url').val(),  
  61.         success: function(data){  
  62.           $('#placeholder').attr('src', data).show();  
  63.           $('#form').data('generate', false);  
  64.           $('button').text('生成快照').attr('disabled', false);  
  65.         }  
  66.       });  
  67.     
  68.       return false;  
  69.     });  
  70.   });  
  71.   </script>  
  72. </body>  
  73. </html> 
  74. <?php  
  75.   if (isset($_GET['url']))  
  76.   {  
  77.     set_time_limit(0);  
  78.    
  79.     $url = trim($_GET['url']);  
  80.     $filePath = md5($url).'.png';  
  81.     if (is_file($filePath))  
  82.     {  
  83.       exit($filePath);  
  84.     }  
  85.  
  86.     //如果不加这句就会报错“Fatal: [Errno 2] No such file or directory; did you install phantomjs?”,详情参考http://mengkang.net/87.html 
  87.     putenv("PHANTOMJS_EXECUTABLE=/usr/local/bin/phantomjs"); 
  88.     $command = "phantomjs phantomjs.js {$url} {$filePath}";  
  89.     @exec($command);  
  90.    
  91.     exit($filePath);  
  92.   }  
  93. ?>  
  94.    
  95. <!DOCTYPE html>  
  96. <html>  
  97. <head>  
  98. <meta charset="utf-8" />  
  99. <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
  100. <meta name="keywords" content="" />  
  101. <meta name="description" content="" />  
  102. <title>快照生成</title>  
  103. <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>  
  104. <style>  
  105. * {margin: 0; padding: 0; } form {padding: 20px; } div {margin: 20px 0 0; } input {width: 200px; padding: 4px 2px; } #placeholder {display: none; }  
  106. </style> 
  107. </head>  
  108.    
  109. <body>  
  110.   <form action="" id="form">  
  111.     <input type="text" id="url" />  
  112.     <button type="submit">生成快照</button>  
  113.    
  114.     <div>  
  115.       <img src="" alt="" id="placeholder" />  
  116.     </div>  
  117.   </form>  
  118.   <script>  
  119.   $(function(){  
  120.     $('#form').submit(function(){  
  121.       if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true)  
  122.       {  
  123.         alert('正在生成网站快照,请耐心等待...');  
  124.         return false;  
  125.       }  
  126.    
  127.       $(this).data('generate', true);  
  128.       $('button').text('正在生成快照...').attr('disabled', true);  
  129.    
  130.       $.ajax({  
  131.         type: 'GET',  
  132.         url: '?',  
  133.         data: 'url=' + $('#url').val(),  
  134.         success: function(data){  
  135.           $('#placeholder').attr('src', data).show();  
  136.           $('#form').data('generate', false);  
  137.           $('button').text('生成快照').attr('disabled', false);  
  138.         }  
  139.       });  
  140.    
  141.       return false;  
  142.     });  
  143.   });  
  144.   </script>  
  145. </body>  
  146. </html> 
  147.   
  148. var page = require('webpage').create();  
  149. var args = require('system').args;  
  150.    
  151. var url = args[1];  
  152. var filename = args[2];  
  153.    
  154. page.open(url, function () {  
  155.   page.render(filename);  
  156.   phantom.exit();  
  157. });

Tags: linnux+phantomjs

分享到: