phantomjs截图的实践

年前也做了一些东西,由于过年只顾疯了,也没有整理,年后补上把~ 今天整理一下个phantomjs截图实践中遇到的问题。

最近做的一个项目,需要在首页展示已经做的一些项目的缩略图,方便在查找的时候,更方便的知道这个项目是一个什么样的页面。本身使用的thinkjs写的系统,所以找到了使用phantomjs进行截图,所以查到了phantomjs的Web Page Module,可以完成截图。同时找到了截图的例子,简单的截图就可以直接使用了。但是现实永远是残酷的,在使用过程中遇到了一下一些问题:乱码问题,图片大小问题,登录状态问题。

接下来就上述提到的一些问题,给出我的一些解决方案。

第一:乱码问题

  • gbk乱码,也就是截图出现口等乱码
yum install bitmap-fonts bitmap-fonts-cjk //centos
apt-get install xfonts-wqy //ubuntu

安装了上面的字体,基本上就不会出现乱码问题了,但是字体还是存在粗细不一致的问题。

  • 字体粗细不一致问题

这个问题的原因是截图服务器上没有安装页面所需的字体,解决方案就是安装所需字体。如何在centos上安装字体?,这里需要注意的是,/usr/share/fonts这个目录是root权限,可以通过上传到其他目录然后移动过来。

第二:图片大小问题

大致有四种途径调整:

  • viewportSize,这个设置的是页面预览的窗口大小,直接影响生成图片的大小,如果需要全屏,那么这个配置不能过小
  • clipRect可以配合viewportSize使用,可以剪切出某个固定大小的图片
  • zoomFactor可以缩放,感觉用起来效果不好
  • 如果图片是在页面展示的话,可以改变img的大小,这个的问题是有可能压缩图片质量,并且原始图片太大的话,资源比较大(这个方法比较奇葩,慎用)。

第三:登录状态问题(cookie问题)

这里需要设置cookie也是一个比较特殊的场景,就是我需要截图的页面是需要登录状态的,所以需要把页面的cookie带过去,这里以登录cookie为例,其他的cookie是相同的处理方式。

/*以下都是不可缺少的,特别是domain,没有默认值,这里踩过坑*/
phantom.addCookie({
	‘name‘     : ‘cookie-name‘,
	‘value‘    : ‘cookie-value‘,
	‘path‘     : ‘/‘,
	‘domain‘   : domain,
	‘expires‘  : (new Date()).getTime() + (1000 * 60 * 60)
});

这样简单的截图基本上都可以搞定了,需要注意的时候,如果访问https的页面还需要配置:--ignore-ssl-errors=true,简单的调用例子如下:

phantomjs [options] somescript.js [arg1 [arg2 [...]]]

//option填写需要的一些参数,比如:--ignore-ssl-errors=true

其他的一些option参数,可以参考:Command Line Interface

phantomjs功能比较多,因为项目需要学习了一下,截图这个API,其他的需要的可以自己看看。

参考资料:

http://www.phantomjs.org/

http://jhonge.net/Home/Single/26626627

https://github.com/ariya/phantomjs

时间: 2024-08-24 16:58:28

phantomjs截图的实践的相关文章

phantomjs截图中文网站网页页面乱码,安装字体解决

用phantomjs去截取中文页面的网站可能会出现乱码的情况,也就是截图中中文的位置全是方框. 解决办法就是安装字体. 在centos中执行:yum install bitmap-fonts bitmap-fonts-cjk 在ubuntu中执行:sudo apt-get install xfonts-wqy 这样再去截图中文的页面就不会出现一堆的方框了.

利用PhantomJS 自动截图Kibana ,phpmailer发送网站运营日报

如题,先来张最终效果运营日报 下面介绍下实现过程 [前期准备] kibana配置视图,并做好条件过滤视图,这里就是做介绍,可以参考博文, 视图做好后生成一个短链接,这里我们生成的是 http://10.0.0.110:5601/goto/4d641c075d7cbf2c7d70a82b16436769 1.安装配置PhantomJS # yum -y install gcc gcc-c++ make flex bison gperf ruby   openssl-devel freetype-d

Nodejs+定时截图+发送邮件

功能 每天定时截图,并把截到的图片自动通过邮件发送. 说明 代码注释已经非常详细,就不多做说明,需要的朋友自己查看代码即可,主文件Mail.js,截图文件capturePart1.js,capturePart2.js,capturePart3.js,这里只展示了capturePart1.js其他两个类似.值得注意的是有登录权限的网站一定要设置Cookie,需要截取高质量图片的话截取时间一定设置长一些. Mail.js /**************************************

nodejs+phantomjs+七牛 实现截屏操作并上传七牛存储

近来研究了下phantomjs,只是初涉,还谈不上深入研究,首先介绍下什么是phantomjs. 官网上的介绍是:”PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.”翻译过来就是:”PhantomJS

爬虫验证码

我现在使用 phantomJS 截图,然后裁剪得到验证码,再通过Python光学识别获取验证码. 这个过程中遇到 phantomJS 截图大小不一致的问题,我本地的和服务器的图片,验证码的位置不一致.没办法,只好把服务器上的图片 scp 下来,然后更改像素位置. 为什么不直接下载图片下来呢? 每次点击图片,图片都会变化.应该是要将 cookie 和验证码一起提交上去.要验证这个观点,我决定使用 Charles 抓包看这些请求的顺序,并更改 cookie 看下有什么变化.验证码的思路是不是这样的:

Java下HttpUnit和Jsoup的Http抓取

简单记录下:搜集信息-分析问题-解决问题 关于html文档的操作现成库有: HttpUnit 很老了,不更了 http://www.httpunit.org/  20 May 2008 HttpUnit 1.7 released Jsoup 还更新 http://jsoup.org/ htmlunit http://htmlunit.sourceforge.net/ selenium WebDriver 带有HttpUnit Phantomjs 截图 等... 抓取xiami网的音乐漫游列表和热

你懂自动化测试吗?

自动化测试:自动化测试的一个很重要的目的就是提高测试效率,并且快速的反馈质量.但是各个领域的自动化还是有一些区别的,比如:web自动化和移动端自动化.而对于自动化来说,首先还是要去学习自动化的框架(并不是写代码),好的框架能够让你事半功倍.而对于自动化人员来说,学习自动化框架对于自己后面的自动化开发工作是很有帮助的. web自动化测试:目前流行的是selenium框架+脚本语言(python or ruby).系统的学习下selenium框架,并且尝试搭建起来并且用于自己的项目,这样你对自动化的

资源文档

bootstrap-slider: 文档:http://seiyria.com/bootstrap-slider/ 源码:https://github.com/seiyria/bootstrap-slider Bootstrap Multiselect: 文档:http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html#getting-started 源码:https://github.com/da

京东前端:PhantomJS 和NodeJS在网站前端监控平台的最佳实践

1. 为什么需要一个前端监控系统 通常在一个大型的 Web 项目中有很多监控系统,比如后端的服务 API 监控,接口存活.调用.延迟等监控,这些一般都用来监控后台接口数据层面的信息.而且对于大型网站系统来说,从后端服务到前台展示会有很多层:内网 VIP.CDN 等. 但是这些监控并不能准确地反应用户看到的前端页面状态,比如:页面第三方系统数据调用失败,模块加载异常,数据不正确,空白开天窗等. 相关厂商内容 Native动态化最新技术解析 不可错过的智能时代的大前端 性能优化最佳实践经验谈 百度技