blade之前提起用webkit2png进行网页中广告位的截图，但是之后遇到了些问题。今天有时间，就折腾了一下。
从上Clone下代码，扫了一眼，不是很多，使用Qt4实现的，可是杯具的是，当年学习的Qt4的都忘干净了。。。
实现方案
大致使用了一下webkit2png，发现有个问题，首先是不支持flash页面，也不能抓取全部网页。
1. flash支持
不断的google，发现只要设置QWebPage的一个属性就可以了，QWebSettings::PluginsEnabled。
查看webkit2png，发现其实本身是支持这么一个选项的 -F plugins，就设置了plugins这个属性。
2. 显示全部网页
这个问题查了好长时间，最后发现换了另外一个工具cutycapt竟然能够抓取全部网页。问题在什么地方呢？
webkit2png不能抓取全部网页，但是cutycapt能够抓取全部网页，两者都是使用的Webkit，那么应该只是API设置上的不同。
webkit2png使用setViewportSize()和setContentSize()使用这两个API来设置网页内容大小和显示部分的大小，但是webkit2png中用于网页显示的View寄生在Window上，本身Window大小有限无法放下全部网页，那么无论怎么调整大小都不可能抓取到全部网页。
cutycapt直接使用view进行显示，没有寄生在Window上，所以得到了全部网页。
==> webkit2png的window主要是用在geometry参数，用来调整显示的大小。
blade他们的需求是把网页中指定位置指定大小的部分抓取下来保存为图片，要实现这个需求，有两个思路：
1. 让浏览器焦点设置到具体的位置，直接抓图。
2. 抓下全图，使用工具裁剪出需要的部分。
分析方案1发现浏览器焦点设置，当前的这些开源实现，无论是webkit2png，还是cutycapt都没有实现，差了一下QT的文档，发现这么一个接口：
void QWebPage::scrollRequested ( int dx, int dy, const QRect & rectToScroll ) [signal]
发送一个信号控制滚轮到指定的位置，设置相应的slot函数，进行处理。考虑到自己现在的Qt水平，这个方案还是暂缓一下;-)
方案1暂缓就使用方案2，虽然有些搓，需要2步2个工具完成，但是可以忍：
使用cutycapt将整个网页抓取下来【可以使用去掉window的webkit2png实现】，然后使用convert命令，指定裁剪的部分在图片的位置以及其大小。
网页快照抓取
cutycapt命令使用：
--url=xxx指定需要生成缩略图的url
--out=xxx指定生成的缩略图路径
--javascript=on允许页面中的javascript运行
--plugins=on允许webkit的插件运行【flash支持需要设置这个选项】
cutycapt --javascript=on --plugins=on --url= |
图片裁剪
convert裁剪图片的命令格式如下：
使用crop选项，进行图片裁剪，也可以直接使用mogrify。
convert -crop {Width}x{Height}+{X}+{Y} old-img.png new-img.png |
会把old-img.png中位置从{X,Y}开始的大小为{Width,Height}的图片裁剪出来，并保存到new-img.png中。
实例
抓取sina首页上的百事可乐flash广告缩略图：
cutycapt --javascript=on --plugins=on --url= --out=/home/wangyao/Desktop/sina.png
convert -crop 270x228+264+95 /home/wangyao/Desktop/sina.png /home/wangyao/Desktop/sina-ad.png
参考：
阅读(10956) | 评论(0) | 转发(0) |
