在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://jp.phpip.com
http://iecapt.sourceforge.net
http://www.websitescreenshots.com(Non-Open source)
http://snap.otag.cn/
http://sourceforge.net/projects/thumb-page/
PHP方式:(注意COM方法只在windows才能使用)
<?php
$browser = new COM("InternetExplorer.Application");
$handle = $browser->HWND;
$browser->Visible = true;
$browser->Fullscreen = true;
$browser->Navigate("http://www.phpshao.cn");
/* Still working? */
while ($browser->Busy)
com_message_pump(4000);
}
$im = imagegrabwindow($handle, 0);
$browser->Quit();
//imagejpeg($im, "tmp.jpg");
//$old_img=imagecreatefromjpeg("tmp.jpg");
$new_img = imagecreatetruecolor(200,150);
imagecopyresampled($new_img,$im,0,0,0,0,200,150,1024,768);
imagejpeg($new_img , 'image/'.time().'.jpg',100);
imagedestroy($new_img);
?>
运行环境php5.2以上打开gd2
- 基于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