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. 有了 Docker，用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取

    点这里 阅读目录 用 AngularJS(以及其它 JavaScript 框架)开发的 Web 站点不支持爬虫的抓取 解决方案 为什么公开我们的解决方案 实现 AngularJS 服务 结论   Pr ...

  2. DF学Mysql（三）——索引操作

    概要: 数据库对象索引其实与书的目录非常相似,主要是为了提高从表中检索数据的速度. 由于数据存储在数据库表中,所以索引是创建在数据库表对象上的,由表中的一个字段或多个字段生成的键组成,这些键存储在数据 ...

  3. AutoCompleteTextView的应用

    现在我们上网几乎都会用百度或者谷歌搜索信息,当我们在输入框里输入一两个字后,就会自动提示我们想要的信息,这种效果在Android 里是如何实现的呢? 事实上,Android 的AutoComplete ...

  4. 构建iOS稳定应用架构时方案选择的思考，主要涉及工程结构，数据流思想和代码规范

    工程结构架构,减少耦合混乱以及防治需求大改造成结构重构,如何构建稳定可扩展可变换的工程结构的思考 我打算采用Information flow的方式自上而下,两大层分为基础层和展现层的结构.基础层分为多 ...

  5. ==和equals的区别

    == :是判断两个变量或实例是不是指向同一个内存空间equals :是判断两个变量或实例所指向的内存空间的值是不是相同 结论:欲比较栈中数据是否相等,请用= =:欲比较堆中数据是否相等,请用equal ...

  6. hdu 4768 Flyer 二分

    思路:由于最多只有一个是奇数,所以二分枚举这个点,每次判断这个点的左边区间段所有点的和作为 二分的依据. 代码如下: #include<iostream> #include<cstd ...

  7. 为什么toString方法可以用来区分数组和对象？

    首先大家都应该知道在javascript中只有是对象都存在toString方法,将调用该方法的值转换为字符串返回,如下: var arr = [1, 2, 3]; console.log(arr.to ...

  8. 李洪强iOS开发之断点续传1

    未完待续.. // //  ViewController.m //  A18 - duo wen jian shang chuan // //  Created by 李洪强 on 16/6/29. ...

  9. RxJava+Retrofit+MVP构建的App——聚合资讯

    RtfRxMVP 聚合资讯APP,提供热点资讯,天气预报以及笑话精选服务,使用 Retrofit + RxJava + MVP 构建代码. Hello U 这是我的一个练习项目,第一次尝试运用 MVP ...

  10. ntelliJ IDEA 14 注册码

    user or company nameo license key63625-MQ87K-3SRZ2-8MQYB-6NQZC-2Z8K6