前言
最近工作中遇到一个需求，需要实现 截图 功能，断断续续查找资料、验证不同的实现方法终于算基本搞定了页面截图，因为中间过程曲折花费较多时间，分享出来帮助大家快速实现截图
为什么选用 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
|
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 |
查看效果
发现图片没有加载好
来看以下刚刚的命令行：
/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 };产生了疑问
查看更多关于java利用phantomjs进行截图实例教程的详细内容...