基于linnux+phantomjs實(shí)現(xiàn)生成圖片格式的網(wǎng)頁快照

2024-05-04 23:34:17

字體：大中小

供稿：網(wǎng)友

在代碼區(qū)看到一個(gè)生成站點(diǎn)快照的代碼，看了半天才發(fā)現(xiàn)，作者僅僅貼出來業(yè)務(wù)代碼，最核心的生成快照?qǐng)D片的代碼反而沒有給出來。以前記得google搜索提供站點(diǎn)縮略圖，那時(shí)候覺得好神奇，但是沒有花時(shí)間去做深入的調(diào)研。昨天又遇到了，那就順便調(diào)研下吧。

安裝擴(kuò)展:
(1)下面是我在linux上的安裝過程，如果沒有安裝git請(qǐng)先yum install git
安裝casperjs

復(fù)制代碼代碼如下:

		
		    cd /
		    git clone git://github.com/n1k0/casperjs.git
		    cd casperjs
		    ln -sf /casperjs/bin/casperjs /usr/local/bin/casperjs  //可以忽略 實(shí)際執(zhí)行中php是執(zhí)行 /casperjs/bin/casperjs

    (2)安裝phantomjs，下載地址：http://phantomjs.org/download.html
       下載后操作很簡(jiǎn)單，直接把解壓好的/bin/phantomjs移動(dòng)到/usr/local/bin/phantomjs就可以了。/
       測(cè)試phantomjs --version 有結(jié)果不報(bào)錯(cuò)，說明安裝OK

    (3)安裝字體
      1. 首先獲得一套“微軟雅黑”字體庫（Google一下一大把），包含兩個(gè)文件msyh.ttf（普通）、msyhbd.ttf（加粗）；
      2. 在/usr/share/fonts目錄下建立一個(gè)子目錄，例如win，命令如下：

復(fù)制代碼代碼如下:

# mkdir /usr/share/fonts/win

3. 將msyh.ttf和msyhbd.ttf復(fù)制到該目錄下，例如這兩個(gè)文件放在/root/Desktop下，使用命令：

復(fù)制代碼代碼如下:

		
		 # cd /root/Desktop
		 # cp msyh.ttf msyhbd.ttf  /usr/share/fonts/win/

4. 建立字體索引信息，更新字體緩存：

復(fù)制代碼代碼如下:

		
		   # cd /usr/share/fonts/win
		          # mkfontscale  （如果提示 mkfontscale: command not found，需自行安裝 # yum install mkfontscale ）
		          # mkfontdir
		          # fc-cache    （如果提示 fc-cache: command not found，則需要安裝# yum install fontconfig ）

至此，字體已經(jīng)安裝完畢！

<?php

  if (isset($_GET['url']))

  {

    set_time_limit(0);



    $url = trim($_GET['url']);

    $filePath = md5($url).'.png';

    if (is_file($filePath))

    {

      exit($filePath);

    }



    //如果不加這句就會(huì)報(bào)錯(cuò)“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('正在生成網(wǎng)站快照，請(qǐng)耐心等待...');

        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>