因为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. Postman—参数化

    一.单个数据参数化 场景:购物车接口,需要用到登录接口返回的token 1.登录接口,在Tests里面设置usertoken环境变量,用来保存token值. 2.获取购物车接口使用usertoken变 ...

  2. 微信小程序开发-概述

    微信小程序开发-概述 一.小程序申请&APPID 登录微信平台申请成为小程序开发者,小程序不可直接使用服务号或订阅号的AppID,需要登录微信公众平台管理后台,在网站的"设置&quo ...

  3. n-grama

    一.N-Gram的原理(这个词出现在句子中出现的概率) N-Gram是基于一个假设:第n个词出现与前n-1个词相关,而与其他任何词不相关.(这也是隐马尔可夫当中的假设.)整个句子出现的概率就等于各个词 ...

  4. Hive文件存储格式和hive数据压缩

    一.存储格式行存储和列存储 二.Hive文件存储格式 三.创建语句和压缩 一.存储格式行存储和列存储 行存储可以理解为一条记录存储一行,通过条件能够查询一整行数据. 列存储,以字段聚集存储,可以理解为 ...

  5. jenkins自动化部署

    目录 typora-copy-images-to: pic Jenkins部署文档 一.安装环境 1.CentOs下安装JDK 2.CentOS安装Maven 3.CentOS安装git 4.Cent ...

  6. Cmake编写JNI

    调用两个库 CMakeLists.txt //把那种大段的注释去掉了 cmake_minimum_required(VERSION ) add_library( # Sets the name of ...

  7. C# 获取config文件 实体转换

    随着项目的扩展,单独的key,value配置文件已经不能满足需求了 这里需要自定义配置节点,例如 <!--自定义 具体实体类配置问节点信息--> <School Name=" ...

  8. <思考的技术>简记

    1.查看资料及背景,将导出的结论.主张列成一张表:2.把表上的结论.主张根据主题的类似性作分类:3.将同一类型的结论.主张按顺序区分:这个时候,把有因果关系的主张或结论分别放好,原因放在下面,结果放在 ...

  9. SQL SERVER 原来还可以这样玩 FOR XML PATH

    FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...

  10. 从以前的项目格式迁移到 VS2017 新项目格式

    以前的项目格式使用的是 csproj 的格式,但是 .net core 支持使用 project.json 格式的项目文件,后来还是决定不使用这个格式. VS2017 的项目格式更好读.更简单而且减少 ...