网页截图(2)

2014年10月18日 / toozoofoo

莲蓬网几个月前开始对用户收藏的网页进行截屏,并展示在链接左侧,在底层用得工具是wkhtmltoimage,原理其实就是模拟浏览器行为,渲染出网页后进行截屏。但是现在发现这个工具对于某些网站,截图之后的图片是一片空白,这个实在令人难以忍受。

在一番研究之后才了解到,这样的网页一般是有图片的,而这些图片展示有两种情况:
  1. 使用了一种叫做parallax的技术(例如这个:http://llidesign.co.uk/iconic-furniture/
  2. 图片使用了异步加载的方式
这两种情况都是需要人用鼠标往下滚动页面时出发了一些js脚本,产生图片显示,我查下了wkhtmltoimag的各种参数,貌似都不支持。而我知道现在的一种叫做headless webkit的实现,它也是一种浏览器,只不过没有界面,暴露一些浏览器的api给开发使用。当然,它的出现得益于nodejs的诞生。这样的js库有很多,这里只列出一个PhantomJS,它的api里就有截屏的接口,网站中甚至提供了一个简单的例子:

var page = require('webpage').create();
page.open('http://github.com/', function() {
  page.render('github.png');
  phantom.exit();
});
在python里调用PhantomJS的这个api,只需要写个js,然后通过Popen运行。但是问题在于由于网页的下载和渲染,包括截屏都是异步的,python程序里调用后,并没有等待截屏结束。在google之后,得到的解决,借助selenium:
driver = webdriver.PhantomJS() # or add to your PATH
driver.set_window_size(1024, 796) # optional
driver.set_page_load_timeout(20) 
driver.get(url)
driver.save_screenshot(target) # save a screenshot to disk
driver.quit()
具体selenium在内部如何实现同步的,有兴趣可以看下源码。

comments powered by Disqus

莲蓬志


  • 网页截图(2) / 莲蓬网几个月前开始对用户收藏的网页进行截屏,并展示在链接左侧
  • 网站图标(favicon)服务 / 莲蓬一直用第三方网站的favicon服务来显示收藏链接的网站
  • 网页截图 / 收藏的列表页面现在除了网页小图之外,全是文字,显得有些单调,
  • 莲蓬用户QQ群 / 在这么长的时间里一直忽略了和和大家的沟通,现在希望通过QQ群
  • 莲蓬笔记 / 我们发布了一个简单的笔记功能,你可以用它来记录你脑中的想法,
  • 专辑订阅 / 现在可以只订阅某个特定专辑,而不用关注用户的所有专辑
  • 为Chrome浏览器设置莲蓬快捷键 / 谷歌Chrome浏览器可以为插件设置快捷键,喜欢快捷键的同志
  • 新版莲蓬 / 这次的改版没花多少时间来进行,主要变化是布局、配色以及收藏(

刚刚