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. 《Thinking in C++》学习笔记（二）【第三章】

    第三章 C++中的C 3.4.4 指针简介 ‘&’运算符:只要在标识符前加上‘&’,就会得出标识符的地址. C和C++有一个专门存放地址的变量类型.这个变量类型叫做指针(pointer ...

  2. 取得DisplayMerics手机屏幕大小的应用

    DisplayMerics:A structure describing general information about a display, such as its size, density, ...

  3. x86虚拟地址到物理地址的映射学习

    这里只谈分页管理的机制,也是目前最重要的内存管理机制. 最初的设计想法: 结构图如下: 页的尺寸是4KB,虚拟地址的前20位用于指定一个物理页,后12位用于访问页内偏移. 页表项的结构: 各个位的含义 ...

  4. linux下如何查看主机的外网ip地址

    在linux下如果我们使用的是nat方式上网.通过ifconfig命令查看到的ip地址往往是内网地址 那么如何查看主机在互联网上使用的公网IP呢?我们可以在命令行下使用curl命令实现这个功能. [r ...

  5. 【poj3691-DNA repair】AC自动机+DP

    题意:给n个病毒DNA序列,再给一个DNA序列,问该序列至少修改多少个碱基能不含任何病毒DNA.病毒DNA序列一共不超过1000,询问的DNA长度不超过1000. 题解:DP:d[l][p]表示询问到 ...

  6. http://jingyan.baidu.com/article/d169e186b38c37436611d8fa.html

    http://jingyan.baidu.com/article/d169e186b38c37436611d8fa.html

  7. lintcode:格雷编码

    格雷编码 格雷编码是一个二进制数字系统,在该系统中,两个连续的数值仅有一个二进制的差异. 给定一个非负整数 n ,表示该代码中所有二进制的总数,请找出其格雷编码顺序.一个格雷编码顺序必须以 0 开始, ...

  8. lintcode： 最小调整代价

    题目 最小调整代价 给一个整数数组,调整每个数的大小,使得相邻的两个数的差小于一个给定的整数target,调整每个数的代价为调整前后的差的绝对值,求调整代价之和最小是多少. 样例 对于数组,最小的调整 ...

  9. 用Java编写你自己的简单HTTP服务器

    http://blog.csdn.net/yanghua_kobe/article/details/7296156 原文不错. 服务器支持的并发连接数,就是要开多少个线程,每个线程里一个socket监 ...

  10. QT+VS编译器处理字符串时的坑真是多

    以下因素都有影响:1. QT4与QT5对字符串编码的处理不同(最好不要在源代码里直接写中文,坑更多)2. QTextCodec自动对编码转换的影响3. 源代码文件对编码存储格式的不同会影响编译器对字符 ...