安装扩展:
(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代码
<?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>快照生成-www.oicqzone.com</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>
JS代码
"use strict";
var RenderUrlsToFile, arrayOfUrls, system;
system = require("system");
var args = require(\'system\').args;
var url = args[1];
//var output = args[2];
var page = require(\'webpage\').create();
phantom.outputEncoding = "gbk"; //解决中文乱码
var address = url;//填写需要打印的文件位置
var output = \'./img/\'+\'xigua\'+\'.png\';//存储文件路径和名称
page.viewportSize = { width: 720, height: 1200};//设置长宽
//page.clipRect = { top: 0, left: 0, width: 380, height: 560 };
page.open(address, function (status) {
if (status !== \'success\') {
console.log(\'Unable to load the address!\');
phantom.exit();
} else {
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 800);
}
});
方法二:
$file_name = rand(100000,999999).".jpg";
$path = \'/nas/wxdoctor/tempimg/\'.$file_name;
$cmd ="wkhtmltoimage --width 750 --height 1206 --quality 94 $url ".$path;