php网站快照源码,使用phantomjs生成网站快照

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

才开始找到了wkhtmltopdf这款工具，这款工具的地址是：http://code.google.com/p/wkhtmltopdf/。 这款工具集下有一个wkhtmltoimage，可以用来生成站点快照。才开始在xen的虚拟机上跑，操作系统是centos，各种问题，折腾到最后实在没经历折腾了。

查到后来，看到老外一篇文章，发现wkhtmltoimage对与运行xen虚拟机的系统支持的并不好，具体情况可以参见这篇文章：http://blog.behance.net/dev/wkhtmltopdf-wkhtmltoimage-x-centos-x-xen-segfault-mania。

放弃了wkhtmltoimage，继续找到了phantomjs和slimerjs，两款都是服务器端的js，简单理解，都是封装了浏览器解析引擎，不同是phantomjs封装的webkti，slimerjs封装的是Gecko(firefox)。 权衡利弊，决定研究下phantomjs，于是就用phantomjs实现了网站快照生成。phantomjs的项目地址是：http://phantomjs.org/

代码涉及两个部分，一个是设计业务的index.php，另一个是生成快照的js脚本snapshot.js。代码比较简单，仅仅是实现了功能，没有做过多的修饰。代码分别如下所示：

index.php<?php

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

{

set_time_limit(0);

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

$filePath = "./cache/".md5($url).'.png';

if (is_file($filePath))

{

exit($filePath);

}

$command = "phantomjs/bin/phantomjs snapshot.js {$url} {$filePath}";

exec($command);

exit($filePath);

}

?>

快照生成

* {

margin: 0;

padding: 0;

}

form {

padding: 20px;

}

div {

margin: 20px 0 0;

}

input {

width: 200px;

padding: 4px 2px;

}

#placeholder {

display: none;

}

生成快照

$(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;

});

});

snapshot.jsvar 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();

});

本文原创发布php中文网，转载请注明出处，感谢您的尊重！