无聊之作：抓取网页截图

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 4189 天前的主题，其中的信息可能已经有所发展或是发生改变。

http://vps.vsean.net/screenshot/
输入网址后，稍等一会，就会显示出网页的截图

源代码： https://gist.github.com/vibbow/5702882
基于PHP + Selenium

第 1 条附言 · 2013-06-04 10:15:48 +08:00

行了，把缓存功能也加上了，截取过的网页快照现在有一个小时的缓存时间。

第 2 条附言 · 2013-06-04 10:25:49 +08:00

Java的内存自动释放能力堪忧啊...
有办法让Java强制GC么？

第 3 条附言 · 2013-06-04 13:19:15 +08:00

轻微增强了鲁棒性，增加了缓存自动清理的功能。
顺便发现有人截取过毛片网站......

第 4 条附言 · 2013-06-05 09:25:25 +08:00

继续增强了截图服务器的鲁棒性。
感觉服务器略微有些撑不住了，尤其是有些人连续同时并发的情况下。

http://vsean.net/blog/post/178
截图服务器配置过程以及我的源代码

第 5 条附言 · 2013-06-05 15:12:29 +08:00

继续轻微增强鲁棒性。
安装了一些常用的字体，把鼠标光标移到最左上角了（现在应该不会出现鼠标hover触发某些网页内容了）

截图

网页

源代码

92 条回复 • 1970-01-01 08:00:00 +08:00

nonozone

2013-06-04 09:24:10 +08:00

嗯，效果不错。

nonozone

2013-06-04 09:24:50 +08:00

如果可以整个选项，然后自定义屏幕大小就更方便了。

yingmingfan

2013-06-04 09:25:42 +08:00

这个有什么用呢。。。

qiayue

2013-06-04 09:42:51 +08:00

感谢，对截图效果很满意

lenville

2013-06-04 09:45:30 +08:00

测试了一下淘宝的页面, 效果很赞

楼主应该是设置了一个延时?
截到的图中还有尚未加载完全的部分

vibbow

2013-06-04 09:45:58 +08:00

奇怪了，为什么我无法对自己的帖子做APPEND @admin
把Flash插件装上了，接下来完善一下缓存功能~

vibbow

2013-06-04 09:47:23 +08:00

@lenville 没加载完是因为淘宝用了ajax，或者淘宝做了延迟加载。
虽然你看到的是一整张网页，但是实际上Firefox的分辨率是1366*768.

vibbow

2013-06-04 10:18:28 +08:00

@yingmingfan 比如说在墙内，暂时没有翻墙手段，有人又发了一个自己想看的t.co连接...

jazz1988

2013-06-04 10:22:42 +08:00

很棒，就是默认字体看着不太习惯，有点纤细了

vibbow

2013-06-04 10:24:19 +08:00

@jazz1988 默认字体应该是文泉驿正黑（我是装了这一个中文字体）...

lichao

2013-06-04 10:44:11 +08:00

某些地方颜色偏差严重，不知道为什么

vibbow

2013-06-04 10:49:01 +08:00

@lichao 比如说？

XDA

2013-06-04 10:49:50 +08:00

额，好像意义真的不大，BTW，www.sina.com.cn 的截图好挫

vibbow

2013-06-04 10:51:53 +08:00

@XDA 新浪网站本身就很挫，没办法...

kusys

2013-06-04 10:53:42 +08:00

太有意思了。

如果能做一个网站，不停的到处去爬站，遇到新站就截图保存，对旧站隔一两个月截图一次。

时间长了，对于查一个网站的历史变迁记录很有意思啊

Livid

MOD

2013-06-04 10:54:53 +08:00

@kusys 这是一个不错的创业项目。

cdfmr

2013-06-04 10:56:58 +08:00

@kusys www.archive.org

kusys

2013-06-04 10:59:03 +08:00

@cdfmr 其实我知道国内外都有一些，但其实功能都很简单，一般就提供单一的查询，而且广告太多。如果能进行一些思考，做的稍微有意思一点……

chiefly

2013-06-04 10:59:26 +08:00

为啥www.taobao.com的截屏与我直接访问的淘宝好多地方都是不一样的？

panxianhai

2013-06-04 10:59:31 +08:00

phantomjs的效果和这个比起来不知道怎么样

Livid

MOD

2013-06-04 10:59:56 +08:00

@vibbow Append 功能需要主题已经存在 30 分钟。

qiayue

2013-06-04 11:01:48 +08:00

在很多时候都会用到网页截图功能，以前（前几年了，最近没找）找的都不怎么满意，要么是截的图不好，要么是别的网站给出的api，有限制，今天终于发现楼主做的这个效果不错，所以立马上来表示感谢。

对于楼上有两位质疑有什么用处和说意义不大的童鞋，我觉得可能是你们没有碰到类似的需求。
生活中我们常会以个人的见识阅历来评价一件事情，而其实这种评价并不客观。

Livid

MOD

2013-06-04 11:02:32 +08:00

@vibbow Java GC 问题可以把 JVM 换成 JRockit 试试。

cdfmr

2013-06-04 11:03:07 +08:00

@kusys archive.org还是很强大的，除了网页，一些下载文件它都保留着，我用它找过几次古董资源。另外，一定程度上兼具FQ功能。

vibbow

2013-06-04 11:03:35 +08:00

@chiefly 因为访问的是淘宝国际版

2code

2013-06-04 11:04:10 +08:00

貌似抓一次被墙的网站就挂掉了

vibbow

2013-06-04 11:04:27 +08:00

@panxianhai 我这个是直接调用了一个完整的Firefox，支持Flash。

vibbow

2013-06-04 11:05:50 +08:00

@2code 服务器本身在国外，请考虑你提交的网址是否本身有关键字，导致被和谐了。

vibbow

2013-06-04 11:06:41 +08:00

@Livid 怎么换？我现在使用的是Ubuntu自带的openjdk。
对Java完全没好感...

Livid

MOD

2013-06-04 11:07:40 +08:00

@vibbow 去 Oracle 网站下载一个 JRockit，然后用它来启动 Selenium server。

vibbow

2013-06-04 11:12:00 +08:00

@Livid 感觉好复杂...
http://vsean.net/pic/di-W3F4.png
反正服务器现在还撑得住。
等撑不住了就上Queue...

firsthym

2013-06-04 11:29:13 +08:00

可以整一个service

dndx

2013-06-04 11:37:36 +08:00

@vibbow JVM 的内存管理方式应该是我见过的最好的之一。

JVM 会在不同的情况下调用不同的 gc 策略，尽可能降低对运行性能的影响。基本没有人工干预的必要。

vibbow

2013-06-04 11:38:23 +08:00

@dndx 遗憾的是，刚才Java内存爆了一次，然后自己挂了...
只好重启vm了...

manhere

2013-06-04 11:38:34 +08:00

@vibbow
( ! )Fatal error: Uncaught exception 'PHPWebDriver_UnhandledWebDriverError' with message ' in /var/www/vps.vsean.net/screenshot/PHPWebDriver/WebDriverBase.php on line 50

( ! ) PHPWebDriver_UnhandledWebDriverError: Unable to connect to host 127.0.0.1 on port 7058 after 45000 ms. Firefox console output: Error: cannot open display: :99 Error: cannot open display: :99 in /var/www/vps.vsean.net/screenshot/PHPWebDriver/WebDriverBase.php on line 50

vibbow

2013-06-04 11:40:10 +08:00

@manhere 刚才内存被Java撑爆了一次...
把VM重启了一下。

sarices

2013-06-04 11:44:21 +08:00

被抓取的网站图片一多就不行了 http://zhengweidong.com/ 抓取失败了
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 30400913 bytes) in /var/www/vps.vsean.net/screenshot/PHPWebDriver/WebDriverBase.php on line 186

dndx

2013-06-04 11:49:09 +08:00

@vibbow 如果服务器内存比较大，可以考虑增加 JVM 堆大小。

应该可以缓解 OOM 的情况。

dndx

2013-06-04 11:50:35 +08:00

@vibbow 忽略上条，没看见 PHP 无法申请内存的提示。。

话说，截图文件还是比较大的，直接在内存里 decode 流量上去必然堪忧啊。

最好可以用流式输出或者直接写到硬盘。

wingoo

2013-06-04 11:56:04 +08:00

非常赞啊

vibbow

2013-06-04 11:59:31 +08:00

@dndx 没法流式啊...
Selenium返回的截图是base64编码的...

choolib

2013-06-04 12:12:53 +08:00

图片上的字体和原网站的字体不一样.

vibbow

2013-06-04 12:58:53 +08:00

@sarices 终于能在抓取你网页内存溢出前正确抛出错误了...

vibbow

2013-06-04 13:01:21 +08:00

不过很好奇为什么json_decode会使用那么大的内存。
在decode前内存使用才30多M，decode的过程居然需要申请大约300M的内存...

11138

2013-06-04 13:09:56 +08:00

关于 2code 所说的问题：
1，把http换成https
2，将用户输入的目标网址用JS加密一下再提交

eYeer

2013-06-04 13:26:24 +08:00

很神奇，弱弱的问一下其原理是什么？
@vibbow

vibbow

2013-06-04 13:29:07 +08:00

@eYeer 本质就是打开firefox，打开要截图的网站，截张图，输出...

eYeer

2013-06-04 13:33:46 +08:00

这api都有？
@vibbow

vibbow

2013-06-04 13:37:43 +08:00

@eYeer http://docs.seleniumhq.org/download/

lichao

2013-06-04 13:39:18 +08:00

@vibbow 看看这个网站的 sidebar title http://demo.libuchao.com/

vibbow

2013-06-04 13:45:19 +08:00

@lichao 我也不知道......
难道Linux下的Firefox有神马特殊...

vibbow

2013-06-04 13:47:30 +08:00

又无法APPEND了 @livid
http://vsean.net/pic/di-AD1A.png

halicando

2013-06-04 14:00:52 +08:00

@kusys @Livid http://archive.org/ 已经有了，输入网址，点'take me back' ，只是链接有时不太稳定。

Livid

MOD

2013-06-04 14:05:33 +08:00

@vibbow 每个主题最多可以有 3 个 append。

vibbow

2013-06-04 14:19:22 +08:00

@Livid 不科学...
想继续APPEND怎么办...

fuxkcsdn

2013-06-04 15:14:13 +08:00

@kusys
你是说这网站(可能得翻墙)？？
http://archive.org/index.php

mozutaba

2013-06-04 15:16:53 +08:00

楼主的想法和我不摸二哥，不过我的比较邪恶。我现在写的抓中文会乱码，一直不知道怎么解决。借这个一用。搞定后给你参观

fuxkcsdn

2013-06-04 15:19:56 +08:00

@vibbow
可以参考下这网站
http://browsershots.org/
用的是python的，而且可以顺便加入到这个网站的项目中

mozutaba

2013-06-04 15:23:19 +08:00

顺便发现有人截取过毛片网站....
我勒个去，抱歉没看完，既然这样我说完吧，通过获取某些针对性的hosts，对里面的网站截图，生成一个列表来展示这些网站有多么误导人，警示青少年。

LincolnDz

2013-06-04 15:55:14 +08:00

很好玩,不过截图糊了...

workaholic

2013-06-04 18:48:26 +08:00

@Livid 这个功能已经有人做了: http://archive.org/ 以前用它看v2ex几年前的样子，-_-

workaholic

2013-06-04 18:50:52 +08:00

不错，很好的东西，以前我都是用php+url2bmp 来实现截图

vibbow

2013-06-04 20:07:58 +08:00

@LincolnDz 截图怎么糊了？

clowwindy

2013-06-04 21:33:00 +08:00

最近我们做长微博图片，采用的方案是 wkhtmltopdf，截图效果比 phantomjs 要好，特别是中文字体上面。在 Ubuntu 上把字体从 mac 上拷过去之后截出来效果基本上和 mac 上看到的一样。

iZr

2013-06-04 22:26:50 +08:00

@clowwindy 期待作品。

undozen

2013-06-04 23:13:41 +08:00 via iPhone

@clowwindy 能不能开放api啊？我只是想给 weibo.com/hackernewsdaily 用用

clowwindy

2013-06-04 23:20:00 +08:00

@undozen 不是，这个是把我们自己的内容截图成长微博。很简单，就是直接调 wkhtmltopdf 这个库。

yudun1989

2013-06-04 23:24:07 +08:00

http://weibo.com/webhistory 。。。。不止一个人和lz有类似想法哦。。(ps:这个我直接用了公司的access token)

Showfom

2013-06-05 01:26:20 +08:00

http://vps.vsean.net/screenshot/take.php?url=http%3A%2F%2Fwhatismy iPad dress.com%2F
碰到这种网站就暴露抓取网页截图的服务器的 IP 了

Showfom

2013-06-05 01:26:52 +08:00

http://vps.vsean.net/screenshot/take.php?url=ifconfig.me

vibbow

2013-06-05 06:37:13 +08:00

@Showfom 亲，直接nslookup一下就出来的啊，何必那么麻烦呢...

linsk

2013-06-05 06:58:53 +08:00 via iPhone

提个建议可以支持网站手机版的截图这个选项

vibbow

2013-06-05 07:43:20 +08:00

@lichao 行了，偏色问题问题解决了，原因是虚拟屏幕自身的色彩数太低。但是很奇怪的是图片渲染又没问题...

vibbow

2013-06-05 08:29:09 +08:00

http://vsean.net/blog/post/178
截图服务器配置过程以及我的源代码

@livid 求APPEND到主题里。

vibbow

2013-06-05 08:49:00 +08:00

@fuxkcsdn 大概瞄了一眼，他和我的方法完全不一样
他是VNC进去，打开浏览器，然后做屏幕截图的：
http://api.browsershots.org/png/original/2c/2cdd15d98d5f44c7ed188511ae8c972a.png
而且: 网站中间部分内容没有了，只有个开头和结尾。还不支持中文...

Livid

MOD

2013-06-05 09:14:36 +08:00

@vibbow 多谢分享，现在每个主题可以 Append 最多 10 次了。

RobinFai

2013-06-05 10:59:16 +08:00

@vibbow 你觉得我会告诉你用cutyCapt，可以无视java么？

vibbow

2013-06-05 11:19:33 +08:00

@RobinFai Flash呢亲~

vibbow

2013-06-05 11:24:06 +08:00

@RobinFai 好吧，貌似也支持Flash。
不过我还是会停留在Selenium的。因为Selenium不仅仅是用来抓屏用的，而且可以进行交互操作~

won

2013-06-05 11:44:56 +08:00

视频框内截不到

vibbow

2013-06-05 11:46:55 +08:00

@won 说明他是异步加载的。
默认只会在主页面加载完成后就立刻截图，不会管那些异步加载的东西的。

won

2013-06-05 11:52:49 +08:00

@vibbow 不对，我认为是他的服务器端没有装解码器

vibbow

2013-06-05 11:58:11 +08:00

@won 服务器装Flash了。优酷的视频flash播放器的确是在页面加载完成后才出来的。

vibbow

2013-06-05 14:58:50 +08:00

@choolib 加入了几个常用字体，你可以再试试~

Showfom

2013-06-05 19:16:43 +08:00

@vibbow 不是，我的意思是说，可以看到你是模拟了什么 UA 出来的。。。可以模拟多点 UA 出不同的截图效果哦

nginxreport

2013-06-05 22:13:52 +08:00

有点意思，截出来是这样的：

http://vps.vsean.net/screenshot/take.php?url=http%3A%2F%2F52q.net

vibbow

2013-06-06 00:04:06 +08:00

@Showfom 我的UA不是模拟出来的，而是我就是启动了一个Firefox去截图的。

Livid

MOD

2013-06-06 00:07:14 +08:00 via iPhone

为什么现在只能看到一个红色禁止符？

vibbow

2013-06-06 00:07:48 +08:00

@nginxreport 截图有防盗链功能的哦～～～

vibbow

2013-06-06 00:08:37 +08:00

@Livid 防盗链措施。他自己能看到是因为他从首页截取过，图片在本地我也设置了一个小时的缓存时间。

shidenggui

2013-06-06 19:52:07 +08:00

http://www.ihaveu.com/
试了一下，貌似无法截取这个网站，chrome上很多扩展也不行，奇怪了

vibbow

2013-06-06 20:09:43 +08:00

@shidenggui 因为他是Flash，而且他的Flash太大了。截图的时候Flash没加载完，就截不出来了。