在Ubuntu上使用Xvfb或vncserver抓取网页画面制作thumbnail

http://www.yeeach.com/tag/screenshot/

在Ubuntu上使用Xvfb或vncserver抓取网页画面制作thumbnail

Posted 10月 8, 2007 Comments(0)

1、安装xvfb或vncserver

apt-get install xvfb

apt-get install vncserver xvncviewer

不用两个都安装，xvfb和vncserver都能够在没有安装X-Windows的情况下，提供X终端服务。可以只安装其中一个，建议安装vncserver，以可以通过诸如tightvnc之类的客户端进行管理。因此就不暂时测试xvfb方式，有空再试验。

2、安装imagemagick

apt-get install imagemagick

3、创建firefox 制作thumbnail时候使用的profile,避免已安装extension的干扰。

firefox -CreateProfile Screenshot

关于firefox的command line，可以参考：

http://kb.mozillazine.org/Command_line_arguments

4、生成thumbnail

vncserver -geometry 1024×768 -depth 24

#DISPLAY=:1 firefox -P "Screenshot" &

DISPLAY=:1 firefox -P "Screenshot"  -new-window http://www.yeeach.com &

DISPLAY=:1 import -window root yeeach.png

不知为何使用命令：

DISPLAY=:1 firefox -P "Screenshot" -remote "openurl(javascript:window.open(’http://www.yeeach.com/‘,”,’fullscreen=yes,toolbar=no,width=1024,height=768′))"始终报错：

Error: No running window found

因此DISPLAY=:1 firefox -P "Screenshot" &  实际上没有起作用，因此注释掉，等有空时候再具体研究原因。

5、为了方便测试，可以首先清除掉X11相关的lock文件和进程

rm -rf /tmp/.X11-unix/* ;rm -rf /tmp/.X*lock

ps -ef|grep X|grep -v grep |awk ‘{print $2 }’ |xargs kill -9

 

5、总结：

• 采用此种方式如果处理过程中，如果出现非正常关闭的情况，firefox打开时候会提示“恢复上次会话”的提示，因此可能导致抓取页面不成功，比较烦人。可以采用的解决方案：

    a、修改配置参数browser.startup.page，关掉firefox的崩溃恢复提示机制。
      推荐设置为 3。firefox 会恢复崩溃时的会话页面，但是正常关闭时，你可能也需要上次的那些会话页面

      0 启动打开 about:blank 空页面

      1 启动打开homepage 主页面

      2 启动打开上次最后关闭时的页面

      3 启动打开上次最后会话的那些页面

    b、采用Tab Mix Plus或SessionPage 扩展设置

• 此种方法实际上是利用了imagemagick抓屏的功能，抓取用firefox打开页面的thumbnail，尽管可以利用 imagemagick裁剪不需要的区域，相对于诸如page saver或screengrab的方案或基于gecko的方案还是比较不是很精准，尤其是不能滚动完整抓取多屏的页面。
• 在调试时候，用tightvnc或其他vnc客户端登录终端进行管理还是很方便，能够及时排查出现的问题，这一点比xvfb方便。

6、参考资料

http://kb.mozillazine.org/Command_line_arguments

http://www.semicomplete.com/blog/geekery/xvfb-firefox.html

http://brad.livejournal.com/2015327.html

http://pc90.narc.affrc.go.jp/meng/?p=8

 

Technorati 标签: screenshot , thumbnail , xvfb , firefox , vncserver

<!---->

基于mozilla gecko内核的HTML Renderer解决方案

Posted 10月 7, 2007 Comments(0)

基于mozilla gecko内核可以让应用程序直接调用gecko的html renderer功能可以生成页面的thumbnai。目前基于firefox这样的开源浏览器相关技术（主要是gecko内核，其他内核暂时不考虑）的 HTML Renderer方案大致可以分成如下几种：

• 采用firefox extension方式，然后通过提供命令行接口，例如page saver
• 采用xvfb+firefox或vnc+firefox，利用命令行调用xvfb或vnc调用firefox形成的图形缓冲区，然后用ImageMagick生成thumbnail
• 采用直接调用gecko 接口或封装接口来生成thumnail

  从性能及扩展性上来讲，第三种方式最为理想，收集了一些基于Java或Python的HTML Renderer

1、Java

 jrex

 cobra或lobobrowser

 Flying Saucer Project

mozilla blackwood webclient

 webrenderer（收费）

其他收费软件，可以参考

Java Sketchbook: The HTML Renderer Shootout, Part 2

2、Python+GTK

GtkMozEmbed

wxMozilla

pyxpcom

3、Ruby+GTK

  moz-snapshooter.rb

  实际上也是利用了GtkMozEmbed

  http://oltsm.blogspot.com/2007/07/ruby-website-screencapture-howto.html

参考资料

http://blogs.pathf.com/agileajax/2007/01/how_to_really_d.html

http://today.java.net/pub/a/today/2004/05/24/html-pt1.html

http://java.net/pub/a/today/2004/06/14/html-pt2.html

http://www.hackdiary.com/archives/000055.html

http://oltsm.blogspot.com/2007/07/ruby-website-screencapture-howto.html

http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html

http://mail.python.org/pipermail/python-list/2006-December/419414.html

http://blog.pixnet.net/kewang/post/4756715

https://aptframework.dev.java.net/gooey/screenCapture.html

http://forum.java.sun.com/thread.jspa?threadID=5191504&tstart=75

http://schmidt.devlib.org/java/save-screenshot.html

http://forum.java.sun.com/thread.jspa?threadID=477654&messageID=2220990

http://forum.java.sun.com/thread.jspa?threadID=604040

http://ilovelate.blog.163.com/blog/static/601420074610168616/

http://zh.wikipedia.org/wiki/Trident

 

Technorati 标签: thumbnail , gecko , screenshot , html renderer , page preview

<!---->

一些提供snapshot类似功能的服务商

Posted 10月 6, 2007 Comments(0)

  为了探究snap shots背后技术实现方式,google时候发现了readwriteweb上几篇关于web previews分析的文章，算是上一篇的“自动生成网页截图（Screenshot)方法总结”的继续，完整总结一下提供类似于snap shots功能的服务提供商。感觉

readwriteweb关于web previews的文章对Screenshot厂商的分类方法与我在前一篇中的分类较为类似，只不过由于我在分析时候是从Screenshot角度进行分类，他们是从web previews角度进行分类，我的分析更为技术化。文章对web previews厂商业务模式的分析还是比较深刻的，值得借鉴和学习。

1、分类学

1.1、我的分类

应用场景

• 诸如snap shots、interclue、cooliris、Sphere、Browster、iReader 、Blogrovr这样的预览提供商，通过此种技术（当然还要结合其他诸如iframe、服务器端推送等技术）推广其广告链接
• 诸如blogmarks、alexa这样的服务提供商，通过此种技术让用户便捷地获得对网站或网页概况
• 诸如robotreplay、ClickTale这样的用户访问行为分析提供商，应该也会利用此种技术捕获用户的访问历史行为
• 诸如thumbalizr、BrowerCam、websnapr、webshotspro、browsershots这样的纯粹提供screenshot的服务商

1.2、readwriteweb的分类

Since quite a few companies are doing previews, we need to understand their benefit. It seems that current preview makers fall into three major categories:

• Deliver advertising with previews (Browster)
• Use previews to drive traffic to the site (Snap, Sphere)
• Enhance user experience on the site (Netflix)

The companies listed under the second and third bullets do not concern themselves with monetization via preview, since they make money in a different way. For the companies that choose the preview to be their core business, some form of advertising must be in place.

 

2、web previews厂商汇总（不包括screenshot类厂商）

从技术上总体说来，web previews厂商分为两类：插件式厂商（基于firefox或IE的插件）、非插件式厂商（ajax）。

插件式厂商包括：cooliris、interclue

非插件式厂商包括：sphere、snap等

http://www.snap.com

http://www.sphere.com/

http://www.ireader.com/

http://www.blogrovr.com/

http://www.interclue.com/

http://www.cooliris.com/

http://www.netflix.com/

http://www.browster.com/

 

3、参考资料

http://www.readwriteweb.com/archives/web_previews_overview.php

http://www.readwriteweb.com/archives/interclue_web_previews.php

http://www.readwriteweb.com/archives/snap_preview_anywhere_localization.php

http://www.readwriteweb.com/archives/ireader_content_previews.php

Technorati 标签: web previews , screenshot , snap shots , sphere

<!---->

自动生成网页截图（Screenshot)方法总结

Posted 10月 6, 2007 Comments(1)

在alexa、snap shots、blogmarks、cooliris、Interclue等站点中都提供了站点缩略图功能，恰当地使用这种技术手段，对于提高网站的互动性还是有一定好处的，当然对于像snap shots这样的广告技术提供商而言，好处肯定是能够带来更多的广告和流量，在snap shots的站点上倒有广告式比较详细的说明，权作参考snap shots about

对网站用户有什么好处？
Snap Shots使用户们能够对链接加以控制，决定点击那一些连接而使其变得更为有用、从而帮助他们以更高的速度和精确度游览互联网。它是一种经过改进的冲浪方法，因为连接不再是盲目的，而是一种信息来源。

对网站所有者有哪些好处？

Snap Shots为网站拥有者提供了高质量的连接预览功能，让他们能为用户提供一种不仅能享受丰富信息而又能无所不能的经历。而且它是完全免费的!

 

1、应用场景

• 诸如snap shots、interclue、cooliris、Sphere、Browster、iReader 、Blogrovr这样的预览提供商，通过此种技术（当然还要结合其他诸如iframe、服务器端推送等技术）推广其广告链接
• 诸如blogmarks、alexa这样的服务提供商，通过此种技术让用户便捷地获得对网站或网页概况
• 诸如robotreplay、ClickTale这样的用户访问行为分析提供商，应该也会利用此种技术捕获用户的访问历史行为
• 诸如thumbalizr、BrowerCam、websnapr、webshotspro、browsershots这样的纯粹提供screenshot的服务商

 

2、技术实现

在技术实现上，一般都是直接利用浏览器本身对网页渲染输出功能获得网页的图像，然后通过python、perl、php或C++其他高级语言来调用。比较典型的实现方式是Pearl Crescent Page Saver（非开源）利用firefox的extension机制实现Screen Capture，然后封装成命令行。

• 基于mozilla或firefox

http://www.hackdiary.com/archives/000055.html

http://marginalhacks.com/Hacks/html2jpg/

http://pearlcrescent.com/products/pagesaver/ （Non-Open source）

http://www.boutell.com/webthumb/

http://www.burtonini.com/blog/computers/mozilla-thumbnail-20040614.xhtml

一些基于firefox的extension，可用于手动抓屏。另外也可以参照page saver 的实现方式，在screengrab基础上进行改造，提供命令行方式，这样就可以直接调用了。

screengrab

page saver 

Techsmith SnagIt for Firefox

另外可以基于xvfb+firefox+ImageMagick方式，直接用命令行方式生成thumbnail，此种方式最为简单，可以参考：

http://www.semicomplete.com/blog/geekery/xvfb-firefox.html

http://brad.livejournal.com/2015327.html

• 基于safari

http://www.paulhammond.org/webkit2png/

http://www.derailer.org/paparazzi/

• 基于ie内核

  http://iecapt.sourceforge.net

  http://www.websitescreenshots.com （Non-Open source）

  http://snap.otag.cn/

  http://sourceforge.net/projects/thumb-page/

• 基于KDE Konqueror

  http://khtml2png.sourceforge.net/

RobotReplay应该就是基于khtml2png实现的，参看Website Screenshots and Thumbnails on Linux

 

3、参考资料：

3.1、文档

http://www.dlib.org/dlib/january06/foulonneau/01foulonneau.html

http://labnol.blogspot.com/2006/06/how-to-capture-save-screenshots-of.html

http://labnol.blogspot.com/2005/12/take-screen-capture-of-webpages-in.html

http://www.zubrag.com/scripts/website-thumbnail-generator.php

http://www.semicomplete.com/blog/geekery/xvfb-firefox.html

http://brad.livejournal.com/2015327.html

http://blogs.nitobi.com/jake/index.php/2007/05/09/website-screenshots-on-linux/

http://www.titov.net/2006/03/19/how-to-make-site-screenshots-with-linux-server/

http://www.codeproject.com/useritems/Website_Thumbnails_in_C_.asp

http://www.codeproject.com/internet/htmlimagecapture.asp

http://www.codeproject.com/useritems/website_screenshot.asp

http://blogs.pathf.com/agileajax/2007/01/how_to_really_d.html

http://blogs.pathf.com/agileajax/2006/12/how_to_do_page_.html

Explore relationships among Web pages visually

Free Website Thumbnail Services

3.2、项目

http://iecapt.sourceforge.net

http://marginalhacks.com/Hacks/html2jpg/

http://khtml2png.sourceforge.net/

http://www.hackdiary.com/archives/000055.html

http://www.paulhammond.org/webkit2png/

http://www.boutell.com/webthumb/

https://addons.mozilla.org/en-US/firefox/addon/1146

http://snap.otag.cn/

http://fastcgi-gallery.platon.sk/

3.3、服务或商用

http://pearlcrescent.com/products/pagesaver/

http://www.websitescreenshots.com

http://thumbnailspro.com/

http://www.browsercam.com/

http://www.tooto.com/html2image/

http://webthumb.bluga.net/

http://www.thumbalizr.com/

http://www.websnapr.com

http://www.artviper.com/tools.php

http://www.websitethumbnails.net

http://www.webseitentuning.de/screenshots.php

http://thumbnailspro.com