网页快照优雅的解决方案:phantomjs

phantomjs官网和社区已经有足够多的自我介绍和应用实例及优势,就不瞎bb了。传送门: http://phantomjs.org/ 开发工作持续进行中,某个业务场景需要我们对网络站点进行快照缓存预览。发现常见一种是网页源码式的快照,还有就是站点图像了。 网页源码快照,需要对当前页面的内容和资源同步进行副本存储,可能一个多图页面就需要多份图像副本之类。这样一来技术要求和存储都相对增加。还有一种是通过网页转图像的存储方式,不管多大的页面,正常展现后全页面输出为图像,它有且只有一份文件,而且通过控制图像质量,存储空间需求呈几何级减少或增加。我们在流量和空间有限的情况下,乐意选择了后者进行尝试。 进行了简单尝试,php,java等各有自己的解决方案,但是因为擅长的并不是网页渲染,所以效果不是一塌糊涂就是惨不忍睹。因为我们的快照资源最终都会提交到云服务空间中,所以没有服务器与客户机的空间概念,所以最后基本决定了在我们个人主机上开发chrome快照插件的来进行,然后提交上传到云空间。虽然可以手工截图上传,但是定期快照任务,不可能让人天天守着。 寻找chrome插件如何截屏的时候发现了phantomjs, 首页一段简单的文字就打动了我尝试它:SCREEN CAPTURE; 老样子一连串fork on github,install,path配置之后,控制台敲下phantomjs phantomjs> ok,这样就安装成功。这里就不讨论它可以怎么玩,直接进入主题。 在fork下来的phantomjs中包含了很多example,提供了coffeescript和javascript两种代码。找到rasterize.js 将它复制到你期望的地方。(也可以不复制,直接用) 我把它放到了libs/phantomjs下面。然后控制台中。。。 > cd /User/xiaowu/Documents/libs/phantomjs 回车 > phantomjs resterize.js xiaowude.com  xiaowude.com.snap.png 0 0.8 回车 稍等个几秒钟就可以看到在libs/phantomjs下面已经有一张名为 xiaowude.com.snap.png 的完美的网页快照图片啦。 xiaowude.com在chrome里面显示什么样式,图片就是什么样式,毫不含糊。 简单描述一下每个参数的意思。。 phantomjs resterize.js 让phantomjs 执行 resterize.js xiaowude.com 需要进行此次快照的网页地址 xiaowude.com.snap.png 保存的图片名称 0 指定输出大小(读代码发现,这里的大小仅限于指定输出格式为.pdf所用, png什么的,不改代码就不用尝试了) 0.8 指定网页的缩放,默认为1,为原尺寸不缩放。(它不是指输出图片的缩放,而且渲染窗体的缩放,像chrome的zoom网页缩放)。 经过尝试,大部分网页在0.5+网站截图都能很好的显示,再小就可能挤压DOM元素位置了。 真心话,它真的太好用了,而且很简单。对于希望进行大量站点的截图可能用命令行一条条的做就不是很好了。要么用shell要么其他的写一个批量脚本是很重要的,我自己写了一个基于node.js的脚本,shell不是很熟了。就没有深入研究,刚好nodejs天然存在而且依然是js,顺手拈来。 snap.js var fs = require(‘fs’), exec … Continue reading “网页快照优雅的解决方案:phantomjs”

priority

出现一个目标,完成这个目标的路上需要有很多个小的步骤,这些小的步骤没有人会帮你列举出完成顺序1,2,3,完成顺序和最终的结果虽然没有必然联系,但是你可能会发现,完成他们所耗费掉的时间成本可能是最关键的。 在完成一个目标之前,分析这个目标所包含的步骤,将他们更合理的排序,这是对时间最好的保证。