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. SQL 比较乱

    --DROP TABLE T_UserInfo---------------------------------------------------- --建测试表 CREATE TABLE T_Us ...

  2. zoj 2686 Cycle Game 博弈论

    其实规律很好找的,当从某点开始,向某一边找出非0的个数,为奇数时必胜. 代码如下: #include<iostream> #include<cstdio> using name ...

  3. Learn CSS

    韩顺平老师的CSS讲的还是很简单的,仅作入门. div+css的介绍    div+css是什么. div元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素. css是 ...

  4. js 异步请求封装

    1. function ajax(url, onsuccess) { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ...

  5. Struts2 中的值栈的理解

    通过对struts2的一段时间的接触,将自己对OGNL的核心值栈说说,值栈:简单的说,就是存放action的堆栈,当我们提交一个请求 道服务器端 action时,就有个堆栈,如果action在服务器端 ...

  6. 跨平台的加密算法XXTEA 的封装

    跨平台的加密算法XXTEA 的封装 XXTEA算法的结构非常简单,只需要执行加法.异或和寄存的硬件即可,且软件实现的代码非常短小,具有可移植性. 维基百科地址:http://en.wikipedia. ...

  7. Linux Tomcat必须知道的命令

    查看java相关的进程号:ps -ef|grep java 杀死进程:kill -s 9(进程号,9优先级最高) 预启动tomcat: ./catalina.sh run (可查看启动状态) 启动to ...

  8. 简单的自绘CListBox（多行显示）（覆盖DrawItem函数，然后用CDC绘制）

    之前写过一个自绘的CListBox类,详细请参考http://blog.csdn.net/VisualEleven/archive/2010/10/12/5935430.aspx现在修改这之前的代码, ...

  9. Delphi动态事件深入分析（对象方法在调用的时候会传递一个隐含的Self指针，而该指针的值在EAX中。即左边第一个参数）

    Delphi动态事件深入分析 2009-2-7 作者:不得闲核心提示:本实验证明了在类中方法的调用时候,所有的方法都隐含了一个Self参数,并且该参数作为对象方法的第一个参数传递... 首先做一个空窗 ...

  10. Java：抽象类abstract和接口Interface

    一.抽象类:abstract 抽象类就是为了继承而存在的,如果你定义了一个抽象类,却不去继承它,那么等于白白创建了这个抽象类,因为你不能用它来做任何事情.对于一个父类,如果它的某个方法在父类中实现出来 ...