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

安装扩展:
（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
       下载后操作很简单，直接把解压好的inphantomjs移动到usrlocalinphantomjs就可以了。
       测试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 ）

   至此，字体已经安装完毕！

<?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.htmlputenv（"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>

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（）; }）;

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