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

  1.  <?php
  2.      if (isset($_GET['url']))
  3.      {
  4.          set_time_limit(0);
  5.  
  6.          $url = trim($_GET['url']);
  7.          $filePath = "./cache/".md5($url).'.png';
  8.  
  9.          if (is_file($filePath))
  10.          {
  11.              exit($filePath);
  12.          }
  13.  
  14.          $command = "phantomjs/bin/phantomjs snapshot.js {$url} {$filePath}";
  15.          exec($command);
  16.  
  17.          exit($filePath);
  18.      }
  19.  ?>
  20.  
  21.  <!DOCTYPE html>
  22.  <html>
  23.  <head>
  24.  <meta charset="utf-8" />
  25.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  26.  <meta name="keywords" content="" />
  27.  <meta name="description" content="" />
  28.  <title>快照生成</title>
  29.  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  30.  <style>
  31.  * {
  32.      margin: 0;
  33.      padding: 0;
  34.  }
  35.  
  36.  form {
  37.      padding: 20px;
  38.  }
  39.  
  40.  div {
  41.      margin: 20px 0 0;
  42.  }
  43.  
  44.  input {
  45.      width: 200px;
  46.      padding: 4px 2px;
  47.  }
  48.  
  49.  #placeholder {
  50.      display: none;
  51.  }
  52.  </style>
  53.  </head>
  54.  
  55.  <body>
  56.      <form action="" id="form">
  57.          <input type="text" id="url" />
  58.          <button type="submit">生成快照</button>
  59.  
  60.          <div>
  61.              <img src="" alt="" id="placeholder" />
  62.          </div>
  63.      </form>
  64.  
  65.      <script>
  66.      $(function(){
  67.          $('#form').submit(function(){
  68.              if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true)
  69.              {
  70.                  alert('正在生成网站快照，请耐心等待...');
  71.                  return false;
  72.              }
  73.  
  74.              $(this).data('generate', true);
  75.              $('button').text('正在生成快照...').attr('disabled', true);
  76.  
  77.              $.ajax({
  78.                  type: 'GET',
  79.                  url: '?',
  80.                  data: 'url=' + $('#url').val(),
  81.                  success: function(data){
  82.                      $('#placeholder').attr('src', data).show();
  83.                      $('#form').data('generate', false);
  84.                      $('button').text('生成快照').attr('disabled', false);
  85.                  }
  86.              });
  87.  
  88.              return false;
  89.          });
  90.      });
  91.      </script>
  92.  </body>
  93.  </html>

snapshot.js

  1.  var page = require('webpage').create();
  2.  var args = require('system').args;
  3.  
  4.  var url = args[1];
  5.  var filename = args[2];
  6.  
  7.  page.open(url, function () {
  8.      page.render(filename);
  9.      phantom.exit();
  10.  });

上面的代码的演示用例的地址如下： 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. jvm 之 国际酒店 8 月 19 一次full GC 导致的事故

    事故经过: 1  15:18收到短信报警:国际酒店调用OMS queryGorderOrderList方法失败:成单接口调用OMS获取token失败. 2  查看checkList发现15:18开始发 ...

  2. android：scaleType属性

    android:scaleType是控制图片如何resized/moved来匹对ImageView的size. ImageView.ScaleType / android:scaleType值的意义区 ...

  3. ExtJs之Ext.form.field.ComboBox组合框

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  4. IDA 与VC 加载符号表

    将Windbg路径下的symsrv.yes 拷贝到ida 的安装目录,重新分析ntoskrnl.exe, 加载本地的符号表 添加环境变量  变量名:_NT_SYMBOL_PATH变量值:SRV*{$P ...

  5. CoreData的简单使用（一）数据库的创建

    iOS有多种数据持久化得方式 plist文件(属性列表) preference(偏好设置,NSUserDefaults) NSKeyedArchiver(归档,用的不多) SQLite 3 (需要导入 ...

  6. iOS多线程 GCD

    iOS多线程 GCD Grand Central Dispatch (GCD)是Apple开发的一个多核编程的解决方法. dispatch queue分成以下三种: 1)运行在主线程的Main que ...

  7. gcc 优化选项 -O1 -O2 -O3 -Os 优先级

    http://hi.baidu.com/xiaole10368/item/7cea9b1369cc240db88a1a5c 少优化->多优化: O0 -->> O1 -->&g ...

  8. java应用程序利用Exe4j打包exe文件

    1.      使用简介: 把java应用程序打成exe文件我们可以借助第三方软件exe4j来完成.Exe4j大家可以在网上下载,下载地址是: http://www.ej-technologies.c ...

  9. 嵌入式linux的学习之路[转]

    我认为的一条学习嵌入式Linux的路: 1)学习 Linux系统安装. 常用命令.应用程序安装. 2) 学习 Linux 下的 C 编程.这本书必学<UNIX 环境高级编程>.<UN ...

  10. Phalanx--hdu2859（dp 最大对称子图）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2859 题意就是给你一个n*n的字符矩阵,从中选出一个最大的子矩阵(m*m)满足关于斜对角线(左下角到右 ...