http://phantomjs.org/

昨天(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);
}
?> <!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>

snapshot.js

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

上面的代码的演示用例的地址如下: http://static.miaowu.cc/snapshot/

上面的代码放在美国的vps上,国内的有些网站访问不了。

使用phantomjs生成网站快照的更多相关文章

  1. 利用PhantomJS生成网站截图

    var page = require('webpage').create(); page.open('http://qq.com', function () { page.render('exampl ...

  2. 【phantomjs】使用phantomjs生成highChart的图片(待完善)

    阅读目录 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xAxis: { categories: ['Jan' ...

  3. 生成AWK快照的方法

    1.首先在用oracle用户登陆执行sqlplus命令用dba用户执行: exec DBMS_WORKLOAD_REPOSITORY.CREATE_SNAPSHOT (flush_level=> ...

  4. 米扑科技的开源项目:sitemap-php 自动生成网站地图

    米扑科技旗下的产品,近期正在做SEO网站优化,其中子需求之一是调研实现了网站地图(sitemap.xml) 封装简化了许多功能模块,现在分享出来,源代码可在Github上下载,有简单的示例. Gith ...

  5. 如何快速扫描C段(网站快照、后台识别/登录、目录扫描)

    1.C段扫描 C类地址范围从 192.0.0.1 到 223.255.255.254 ,192转换成二进制就是1100000:223转换成二进制就是1101111:所以说网络地址的最高位肯定是110开 ...

  6. Unity生成屏幕快照

    public static Texture2D CaptureCamera(Camera camera, Rect rect) { RenderTexture rt = ); RenderTextur ...

  7. Phantomjs 生成多页PDF

    开篇 最近使用 Phantomjs 生成PDF,其中遇到一些问题,导致PDF生成失败,如出现空白文件或一页数据量太大,都是由于没有设置好格式导致.特别是分页问题,感觉资料很少,除了在 StackOve ...

  8. 开源 免费 java CMS - FreeCMS1.9 移动APP生成网站列表数据

    项目地址:http://www.freeteam.cn/ 生成网站列表数据 提取同意移动APP訪问的网站列表,生成json数据到/mobile/index.html页面. 从左側管理菜单点击生成网站列 ...

  9. 使用Axure生成网站结构图

    使用Axure设计的各网站(产品)页面,生成网站(产品)结构图.这个对于了解网站整体结构很有帮助. 需要把它生成对应结构的网站结构图. 第一步:在“主页”上面新建一个和“主页”平级的页面,命名为“网站 ...

随机推荐

  1. ZOJ3231 Apple Transportation(最小费用流)

    题目给你一棵苹果树,然后每个结点上有一定的苹果树,你要将苹果运输达到某个状态,使得均方差最小. 将苹果x个从a->b的花费是x*w,w是边权. 当时比赛的时候想的就是,最后达到的状态一定是sum ...

  2. 二维码(支持arc,苹果自带扫描,zbar扫描,二维码生成)

    下载地址:http://pan.baidu.com/s/1mgvJzyo

  3. POJ 1411

    #include<iostream> #include<stdio.h> #include<math.h> #define MAXN 50000 using nam ...

  4. 深入浅出ES6(八):Symbols

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 你是否知道ES6中的Symbols是什么,它有什么作用呢?我相信你很可能不知道, ...

  5. springmvc web应用程序 java

    搭建普通 springmvc 1.如图建立相关文件 建立在WEB-INF下比较安全,不能直接访问资源. 2.建立Controller控制器,如图 3.需要导入的jar包 commons-logging ...

  6. strrchr函数

    C语言函数 函数简介 函数名称: strrchr 函数原型:char *strrchr(char *str, char c); 所属库: string.h 函数功能:查找一个字符c在另一个字符串str ...

  7. Linux操作系统下的Sudo命令

    查看.修改或者执行某些命令需要root用户的权限,如果不想直接切换到root用户,就可以使用sudo命令.sudo命令用于针对单个命令授予临时权限.sudo仅在需要时授予用户权限,减少了用户因为错误执 ...

  8. lintcode:打劫房屋II

    题目 打劫房屋II 在上次打劫完一条街道之后,窃贼又发现了一个新的可以打劫的地方,但这次所有的房子围成了一个圈,这就意味着第一间房子和最后一间房子是挨着的.每个房子都存放着特定金额的钱.你面临的唯一约 ...

  9. CF A. Xenia and Divisors

    题目大意: n(为三的倍数)个数的一个序列(每个数均不大于7),找出a,b,c a能被b整除,b能被c整除,序列中的每个数都被用到. 1 2 3 4 5 6 7 只有 1 2 4 1 2 6 1 3 ...

  10. 浅析c语言中的变量(局部变量,外部变量,静态变量,寄存器变量)[转]

    c语言中变量分为四类,分别是 1.auto   自动变量 2.static   静态存贮分配变量(又分为内部静态和外部静态) 3.extern  全程变量(用于外部变量说明) 4.register   ...