因为phantomjs使用了一个真正的渲染引擎WebKit,它能截取一个web页面的真实影像,这是因为phantomjs能够折射出WEB页面上的任何东西,包括html,css,svg和Canvas等。

新建一个JS文件,baidu.js。

// 写入以下内容
var page = require("webpage").create();
// 设置地址变量
var url='https://www.baidu.com' page.open(url,function(){
// 将该页面保存成图片
page.render("test.jpg");
phantom.exit();
}) 执行:
phantomjs baidu.js

  官方提供了一个更完整的将网页保存为图片的JS示例,文件名为rasterize.js ,在JS目录下的子目录examples下面。

  执行方法:phantomjs rasterize.js http://ariya.github.io/svg/tiger.svg tiger.png

当然你也可以通过page的属性来改变视口的大小

var page = require("webpage").create();
// 视口的尺寸就是无头浏览器的真正大小
page.viewportSize = {width:1024,height:768};
// clipRect 是要获取的页面部分大小
page.clipRect = {top:0,left:0,width:1024,height:768}; page.open("http://example.com/",function(){
page.render("github.png");
phantom.exit();
});

  

phantomJs页面截图的更多相关文章

  1. 微信图片生成插件,页面截图插件 html2canvas,截图失真 问题的解决方案

    html2canvas 是一个相当不错的 JavaScript 类库,它使用了 html5 和 css3 的一些新功能特性,实现了在客户端对网页进行截图的功能.html2canvas 通过获取页面的 ...

  2. 利用JavaScript将页面截图生成图片传给后台的插件:html2canvas

    利用JavaScript将页面截图生成图片传给后台的插件:html2canvas 一.总结 一句话总结: 10 <script type="text/javascript"& ...

  3. Chrome - 使用 开发者工具 对页面截图

    概述 使用 开发者工具 对页面截图 背景 经常需要截图 常用的截图模式有这些 窗口截图 区域截图 gif 问题 Chrome 如何截长图 firefox 好像有插件 1. 解决: 使用 Chrome ...

  4. Node.js & 页面截图 & 生成画报

    Node.js & 页面截图 & 生成画报 https://zzk.cnblogs.com/my/s/blogpost-p?Keywords=headless solution 使用 ...

  5. 通过phantomjs 进行页面截图

    本文章参考了使用phantomjs操作DOM并对页面进行截图需要注意的几个问题 及phantomjs使用说明 这两篇文章,初次接触phantomjs的童鞋可以去看下这两篇原文 在学习中可以看下 pha ...

  6. python+selenium自动化软件测试(第6章):selenium phantomjs页面解析使用

    我们都知道Selenium是一个Web的自动化测试工具,可以在多平台下操作多种浏览器进行各种动作,比如运行浏览器,访问页面,点击按钮,提交表单,浏览器窗口调整,鼠标右键和拖放动作,下拉框和对话框处理等 ...

  7. 使用html2canvas.js实现页面截图并显示或上传

    最近写项目有用到html2canvas.js,可以实现页面的截图功能,但遭遇了许多的坑,特此写一篇随笔记录一下. 在使用html2canvas时可能会遇到诸如只能截取可视化界面.截图没有背景色.svg ...

  8. JS 使用html2canvas实现页面截图功能

    html2canvas的官方文档地址:http://html2canvas.hertzen.com/ 实现原理:将需要截图的页面在canvas中进行重绘,这样将页面转换成图片的过程. 注意事项: 不支 ...

  9. phantomJs页面操作

    因为phantomjs能加载和操纵页面,它可以自动化地完美执行页面的各种操作. 操作文档: 脚本的被执行,就像它真的正在web 浏览器上运行一样. 下面的脚本,是读取元素id为myagent的文本内容 ...

随机推荐

  1. python字符串中包含Unicode插入数据库乱码问题 分类: Python 2015-04-28 18:19 342人阅读 评论(0) 收藏

    之前在编码的时候遇到一个奇葩的问题,无论如何操作,写入数据库的字符都是乱码,之后是这样解决的,意思就是先解码,然后再插入数据库 cost_str = json.dumps(cost_info) cos ...

  2. phpredisadmin 莫名其妙错误,打开了无法显示任何数据

    一直用的好好的,某天突然只有页面基本框架,redis数据看不到了. 查日志嘛... PHP Fatal error:  Allowed memory size of 134217728 bytes e ...

  3. CentOS命令行界面与图形界面切换(图文详解)

    不多说,直接上干货! Ctrl + Alt +F1,到图形界面 Ctrl + Alt +F2,到命令行界面 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同 ...

  4. Struts文件上传(FormFile)

    Struts中FormFile用于文件进行上传 1.在jsp文件中进行定义 <form action="/StrutsFileUpAndDown/register.do" m ...

  5. 14-hadoop-运行的2种方式

    hadoop的程序运行有, 具体有3种, 除了上一篇(http://www.cnblogs.com/wenbronk/p/6662119.html)提过的直接发布jar上传到hadoop以外, 还有本 ...

  6. 在Linux系统安装Nodejs最简单步骤

    一.去官网下载和自己系统匹配的文件 英文网址:https://nodejs.org/en/download/ 中文网址:http://nodejs.cn/download/ 通过  uname -a ...

  7. window.location.replace

    有3个页面 a,b,c 如果当前页面是c页面,并且c页面是这样跳转过来的:a->b->c 1:b->c 是通过window.location.replace("..xx/c ...

  8. sql中非存储过程定义参数并使用

    DECLARE @dt datetime SET @dt=GETDATE()--1.短日期格式:yyyy-m-d SELECT REPLACE(CONVERT(varchar(10),@dt,120) ...

  9. 使用 Vuejs 开发 chrome 插件的注意事项

    使用 Vuejs 开发 chrome 插件 chrome 插件的开发其实并不难,web开发者可以使用 html, css, javascript 轻松的开发实用的 chrome 插件. 一个好的 ch ...

  10. NOIP2017 题解

    QAQ--由于没报上名并没能亲自去,自己切一切题聊以慰藉吧-- 可能等到省选的时候我就没有能力再不看题解自己切省选题了--辣鸡HZ毁我青春 D1T1 小凯的疑惑 地球人都会做,懒得写题解了-- D1T ...