因为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. Catalina.createDigester方法详细理解

    这个方法主要设置(这个方法很重要,贵在理解,虽然还没学过设计模式..) 1.遇到<server>标签时创建StandardServer实例   设置StandardServer类内部的相关 ...

  2. javascript实例——鼠标特效篇(包含2个实例)

    鼠标是现在电脑的基本配置之一,也是最常用的输入命令的工具之一.本文将将一些与鼠标有关系的特效. 1.跟随鼠标移动的彩色星星 如题,会根据鼠标的移动而移动,并在鼠标周围随机来回移动,让人感觉在放大缩小. ...

  3. vue常见知识点整理

    什么是 mvvm? MVVM 是 Model-View-ViewModel 的缩写.mvvm 是一种设计思想.Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑:View ...

  4. [日常] Go语言圣经-GIF动画练习语法

    1.常量声明的值必须是一个数字值.字符串或者一个固定的boolean值.2.常量声明和变量声明一般都会出现在包级别3.[]color.Color{...}生成的是一个slice切片和gif.GIF{. ...

  5. SpringMVC中异常捕获

    如果SpringMVC的action中发生异常,我们想将其跳转到一个固定的错误页面,可以通过applicationContext.xml中增加如下配置实现: <bean class=" ...

  6. 撰写html标签的快捷方式2

    1.写一个含有类的标签. div.demo-inline + tap键 就会生成如下<div class="demo-inline"></div> 2.CS ...

  7. 海量数据中找出前k大数(topk问题)

    海量数据中找出前k大数(topk问题) 前两天面试3面学长问我的这个问题(想说TEG的3个面试学长都是好和蔼,希望能完成最后一面,各方面原因造成我无比想去鹅场的心已经按捺不住了),这个问题还是建立最小 ...

  8. AutoFac使用方法总结二:事件与依赖循环

         事件 AutoFac支持三种事件:OnActivating,OnActivated,OnRelease.OnActivating在注册组件使用之前会被调用,此时可以替换实现类或者进行一些其他 ...

  9. AutoFac使用方法总结一:注册

    AutoFac是.net平台下的IOC容器产品,它可以管理类之间的复杂的依赖关系.在使用方面主要是register和resolve两类操作. 这篇文章用单元测试的形式列举了AutoFac的常用使用方法 ...

  10. HDU3085(KB2-G 双向bfs)

    Nightmare Ⅱ Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...