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. Codeforces446C DZY Loves Fibonacci Numbers(线段树 or 分块？)

    第一次看到段更斐波那契数列的,整个人都不会好了.事后看了题解才明白了一些. 首先利用二次剩余的知识,以及一些数列递推式子有下面的 至于怎么解出x^2==5(mod 10^9+9),我就不知道了,但是要 ...

  2. Android中如何查看内存(上)

    文章参照自:http://stackoverflow.com/questions/2298208/how-to-discover-memory-usage-of-my-application-in-a ...

  3. Difference Between Vector and Deque in C++

    1) Dequeue can quickly insert or delete both at the front or the end. However, vector can only quick ...

  4. Windows 7 常用快捷键 命令

    Win+E:  打开新的windows资源浏览器 Win+F:搜索文件或文件夹 Win+R:打开运行窗口 Win + D:显示桌面 Win + M:最小化所有窗口 Ctrl+Shift+N: 新建文件 ...

  5. maven本地仓库.m2文件夹路径讲解

    Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个依赖管理系统(Depen ...

  6. JMeter监控服务器CPU, 内存,网络数据

    http://wenku.baidu.com/link?url=un5QtWHa-A9kCTeVN0PnU3gDEMri38hYqjc8-skNXTD-v65FMObdq1LxfQDb1I6oIK9k ...

  7. lintcode :最长公共前缀

    题目 最长公共前缀 给k个字符串,求出他们的最长公共前缀(LCP) 样例 在 "ABCD" "ABEF" 和 "ACEF" 中,  LCP ...

  8. redis系列之Redis应用场景

    1 取最新N个数据的操作 比如典型的取你网站的最新文章,通过下面方式,我们可以将最新的5000条评论的ID放在Redis的List集合中,并将超出集合部分从数据库获取 1)使用LPUSH latest ...

  9. java中String,StringBuffer,StringBuilder之间的区别

    文章转载自:http://www.cnblogs.com/frankliiu-java/archive/2010/07/05/1771537.html String是固定长度的字符串,如果要发生变化必 ...

  10. Linux下TOmcat调试命令

    1.显示linux系统的环境变量:env命令,会显示JAVA_HOME,Catalina,CLASSPATH等系统变量 2.