服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - PHP教程 - 基于linnux+phantomjs实现生成图片格式的网页快照

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

2020-09-18 16:06PHP教程网 PHP教程

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

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

 

复制代码 代码如下:

    cd /
    git clone git://github.com/n1k0/casperjs.git
    cd casperjs
    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. 建立字体索引信息,更新字体缓存:

 

复制代码 代码如下:

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

 

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<?php
  if (isset($_GET['url']))
  {
    set_time_limit(0);
  
    $url = trim($_GET['url']);
    $filePath = md5($url).'.png';
    if (is_file($filePath))
    {
      exit($filePath);
    }
 
    //如果不加这句就会报错“Fatal: [Errno 2] No such file or directory; did you install phantomjs?”,详情参考http://mengkang.net/87.html
    putenv("PHANTOMJS_EXECUTABLE=/usr/local/bin/phantomjs");
    $command = "phantomjs phantomjs.js {$url} {$filePath}";
    @exec($command);
  
    exit($filePath);
  }
?>
  
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>快照生成</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
* {margin: 0; padding: 0; } form {padding: 20px; } div {margin: 20px 0 0; } input {width: 200px; padding: 4px 2px; } #placeholder {display: none; }
</style>
</head>
  
<body>
  <form action="" id="form">
    <input type="text" id="url" />
    <button type="submit">生成快照</button>
  
    <div>
      <img src="" alt="" id="placeholder" />
    </div>
  </form>
  <script>
  $(function(){
    $('#form').submit(function(){
      if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true)
      {
        alert('正在生成网站快照,请耐心等待...');
        return false;
      }
  
      $(this).data('generate', true);
      $('button').text('正在生成快照...').attr('disabled', true);
  
      $.ajax({
        type: 'GET',
        url: '?',
        data: 'url=' + $('#url').val(),
        success: function(data){
          $('#placeholder').attr('src', data).show();
          $('#form').data('generate', false);
          $('button').text('生成快照').attr('disabled', false);
        }
      });
  
      return false;
    });
  });
  </script>
</body>
</html>
?
1
2
3
4
5
6
7
8
9
10
var page = require('webpage').create();
var args = require('system').args;
 
var url = args[1];
var filename = args[2];
 
page.open(url, function () {
  page.render(filename);
  phantom.exit();
});

以上所述就是本文的全部内容了,希望大家能够喜欢。

延伸 · 阅读

精彩推荐