服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|JavaScript|易语言|

服务器之家 - 编程语言 - Java教程 - java利用phantomjs进行截图实例教程

java利用phantomjs进行截图实例教程

2021-06-03 11:52这个名字有点特别 Java教程

PlantomJs是一个基于javascript的webkit内核无头浏览器 也就是没有显示界面的浏览器,你可以在基于 webkit 浏览器做的事情,它都能做到。下面这篇文章主要给大家介绍了关于java利用phantomjs进行截图的相关资料,需要的朋友可以参考下

前言

最近工作中遇到一个需求,需要实现截图功能,断断续续查找资料、验证不同的实现方法终于算基本搞定了页面截图,因为中间过程曲折花费较多时间,分享出来帮助大家快速实现截图

为什么选用phantomjs进行截图

截图可以实现的方式有很多,比如:

  • selenium
  • htmlunit
  • html2image、、、and so on但是这些实现的截图效果都不好。selenium只能实现截屏,不能截取整个页面,而htmlunit、html2image对js的支持效果并不好,截下来的图会有很多空白。phantomjs就是万精油了,既能截取整个页面,对js支持的效果又好

plantomjs提供了如 css 选择器、dom操作、json、html5、canvas、svg 等。phantomjs 的用处很广泛,如网络监控、网页截屏、页面访问自动化、无需浏览器的 web 测试等,这里只用到网页截屏。

前期准备

安装phantomjs。mac os

java" id="highlighter_457205">
?
1
brew install phantomjs

命令行的方式进行截图

安装以后我们就可以小试牛刀了

打开终端,输入以下命令:

?
1
2
3
4
/users/hetiantian/softwares/phantomjs/bin/phantomjs
/users/hetiantian/softwares/phantomjs/examples/rasterize.js
https://juejin.im/post/5bb24bafe51d450e4437fd96
/users/hetiantian/desktop/juejin-command.png

查看效果

java利用phantomjs进行截图实例教程

发现图片没有加载好

来看以下刚刚的命令行:

/users/hetiantian/softwares/phantomjs/bin/phantomjs:phantomjs可执行文件保存地址
/users/hetiantian/softwares/phantomjs/examples/rasterize.js:rasterize.js文件地址

这段命令可以理解为用phantomjs去运行rasterize.js文件,所以要想解决图片空白的问题我们需要去看一下rasterize.js文件。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
"use strict";
var page = require('webpage').create(),
 system = require('system'),
 address, output, size, pagewidth, pageheight;
 
if (system.args.length < 3 || system.args.length > 5) {
 console.log('usage: rasterize.js url filename [paperwidth*paperheight|paperformat] [zoom]');
 console.log(' paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "a4", "letter"');
 console.log(' image (png/jpg output) examples: "1920px" entire page, window width 1920px');
 console.log('         "800px*600px" window, clipped to 800x600');
 phantom.exit(1);
} else {
 address = system.args[1];
 output = system.args[2];
 page.viewportsize = { width: 600, height: 600 };
 if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
  size = system.args[3].split('*');
  page.papersize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
           : { format: system.args[3], orientation: 'portrait', margin: '1cm' };
 } else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
  size = system.args[3].split('*');
  if (size.length === 2) {
   pagewidth = parseint(size[0], 10);
   pageheight = parseint(size[1], 10);
   page.viewportsize = { width: pagewidth, height: pageheight };
   page.cliprect = { top: 0, left: 0, width: pagewidth, height: pageheight };
  } else {
   console.log("size:", system.args[3]);
   pagewidth = parseint(system.args[3], 10);
   pageheight = parseint(pagewidth * 3/4, 10); // it's as good an assumption as any
   console.log ("pageheight:",pageheight);
   page.viewportsize = { width: pagewidth, height: pageheight };
  }
 }
 if (system.args.length > 4) {
  page.zoomfactor = system.args[4];
 }
 page.open(address, function (status) {
  if (status !== 'success') {
   console.log('unable to load the address!');
   phantom.exit(1);
  } else {
   window.settimeout(function () {
    page.render(output);
    phantom.exit();
   }, 200);
  }
 });
}

尝试一:

对page.viewportsize = { width: 600, height: 600 };产生了疑问

延伸 · 阅读

精彩推荐