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. POJ 1411

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

  2. Javascript format方法

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. ExtJs之文本框及数字输入

    结合HTML来理解, 比较容易. <!DOCTYPE html> <html> <head> <title>ExtJs</title> &l ...

  4. linux下tigervnc-servere服务的安装与使用

    关于tigervnc-servere的安装,可以直接使用本地yum源进行安装. [root@ ~]# yum install tigervnc-server -y 其中tigervnc的主要配置文件位 ...

  5. MongoDB (十) MongoDB Limit/限制记录

    Limit() 方法 要限制 MongoDB 中的记录,需要使用 limit() 方法. limit() 方法接受一个数字型的参数,这是要显示的文档数. 语法: limit() 方法的基本语法如下 & ...

  6. C语言运算符优先级表

    优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右   () 圆括号 (表达式)/函数名(形参表)   . 成员选择(对象) 对象.成员名   -& ...

  7. JAVA字符串格式化String.format()的使用

    JAVA字符串格式化-String.format()的使用常规类型的格式化 String类的format()方法用于创建格式化的字符串以及连接多个字符串对象.熟悉C语言的同学应该记得C语言的sprin ...

  8. Linux服务器沦陷为肉鸡的全过程实录

    1 从防火墙瘫痪说起 2015年3月10日,还没到公司就被电话告知办公室无法正常连接互联网了,网速非常慢,无法正常浏览网页.急急忙忙感到公司,开始查找问题. 首先排除了交换机故障,因为内部局域网正常. ...

  9. k序数组排序

    这道题,已知一个数组a,a[i]排好序后位于a[i-k]跟a[i+k]之间,问说该怎么最快地排序. 可以转换成多路归并问题, a[0]<a[k+1]<a[2k+2]<a[3k+3]. ...

  10. python流程控制语句 for循环 - 1

    Python中for循环语句是通过遍历某一序列对象(元组.列表.字典等)来构建循环,循环结束的条件就是遍历对象完成. 语法形式: for <循环变量> in <遍历对象>: & ...