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

更新时间：2020-03-03 22:19:42 作者：startmvc

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

安装扩展: (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 ）

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


<?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>

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(); 
});

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