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

2 篇文章 0 订阅
在alexa、snap shots、blogmarks、cooliris、Interclue等站点中都提供了站点缩略图功能,恰当地使用这种技术手段,对于提高网站的互动性还是有一定好处的

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

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

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

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

 

1、应用场景

 

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


  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
捕获当前页面的屏幕截图完整而可靠,无需任何额外权限! 截取当前浏览器窗口的全屏屏幕截图的最简单方法。 单击扩展程序图标(或按Alt + Shift + P),观看扩展程序捕获页面的每个部分,然后将其传输到屏幕截图的新标签页,您可以在其中将其下载为图像或PDF,甚至只是将其拖动即可到您的桌面。 *没有膨胀,没有广告,没有不必要的权限,只是将整个网页变成图像的一种简单方法。* *新功能:*先进的屏幕捕获技术可以处理复杂的页面,包括内部可滚动元素以及嵌入式iframe,与以往不同任何其他扩展名。 如果您遇到问题,请通过捕获页面上的客户支持标志图标进行报告,以便我们为您和其他使用此扩展程序的用户改进扩展名。 为了截取整个页面的屏幕快照,它必须滚动到每个可见部分,因此请耐心等待,因为它会Swift组装所有部分。 在极少数情况下,如果您的页面太大,以至于Chrome无法存储在一张图片中,它将通知您并将其拆分为单独的标签中的图片。 将结果导出为PNG,JPEG或各种PDF纸张尺寸-所有这些都可以通过扩展程序的选项进行配置。 此扩展由独立开发人员运行。 在github上查看原始的开源项目:https://github.com/mrcoles/full-page-screen-capture-chrome-extension更改日志:5.7 — 2019-09-15 — imgur.com 5.6的错误修复— 2019-09-13 —捕获长页面时由Chrome 77引起的空白屏幕截图的初始错误修复5.5 — 2019-09-04 —修复了影响Behance和BBC新闻网站5.4的问题— 2019-09-03 —添加“另存为”到选项页面和用户报告的错误修正5.3 — 2019-08-02 —次错误修正5.2 — 2019-07-22 —各种错误修正,包括PDF在导出5.1时被截断的问题— 2019-04-22 —视觉刷新,来自的错误修正用户报告的问题,包括具有iframe权限的Chrome退化修复程序4.9-2018-09-15-用户报告的问题中的各种错误修复,包括Salesforce闪电仪表板4.8-2018-08-14-额外处理了与下载相关的Chrome 68错误允许隐身设置(敬请关注更新以处理在Chrome Beta和Canary> = v69中下载的问题)4.7 — 2 018-08-08 —一些视差站点和其他边缘情况的错误修正4.6 — 2018-07-23 —修复了一些页面停止滚动的回归,改进了固定背景图像4.5 — 2018-07-18 —修正了错误白线修复4.4 — 2018-07-16 —新增了对固定标头跳转的支持,新的权限控件,下载修复,视差改进4.3 — 2018-06-29 —针对零星iframe错误的错误修复4.2 — 2018-06-14 —错误修复来自用户报告4.1-2018-06-12-错误修复,缩小了白线修复4.0-2018-06-10-对iframe和框架集的新支持,Chrome 67兼容性更新3.17-2018-05-30-滚动问题和改进动画处理3.16-2018-05-21-修复了用户报告的滚动问题3.15-2018-05-08-修复了固定元素的其他问题,更好地捕获了提要3.14-2018-05-02-导出到PDF文件名的改进3.13 — 2018-05-01 —修复了另存为最近下载位置的问题,改进了固定元素3.12 — 2018-04-27 —添加了“导出到PDF”选项,以及错误修正和性能改进3.11 — 2018-04-09 —改进了捕获的屏幕,支持固定背景3.10 — 2018-03-30 —各种页面的错误修正,更清洁的选项页面3.9 — 2018-03 -24-修复了问题保存选项,改进了滚动条处理3.8-2018-03-22-增加了指定下载目录的功能,错误修复3.7-2018-03-20-通过选项页下载为PNG或JPG,针对用户报告的问题提供了错误修复3.6 — 2018-03-16 —包括adwords在内的各个页面的错误修正,改进的下载功能3.5 — 2018-03-14 —用户报告的错误修正,捕获页面的稳定性得到改进3.4 — 2018-03-09 —滚动条和固定位置的改进通过用户报告3.3的元素-2018-03-07-文件名中的时间戳,批量下载/删除功能,自动下载选项3.2-2018-03-05-通过用户报告3.1的滚动条和固定位置元素的改进03-客户支持功能3.0的更新-2018- 02-27-针对Gmail等困难页面的全新高级滚动算法! 2.12 — 2018-02-23 — svg和用户报告的页面的错误修正2.11 — 2018-02-21 —一些用户报告的页面的错误修正2.10

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值