使用PhantomJS在服务器端渲染并生成Echarts图片
一，使用的jar包
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-exec</artifactId>
<version>1.3</version>
</dependency>
<dependency>
<groupId>com.github.abel533</groupId>
<artifactId>ECharts</artifactId>
<version>3.0.0.2</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
</dependency>
<!-- Open API在线文档 -->
<dependency>
<groupId>org.springdoc</groupId>
<artifactId>springdoc-openapi-ui</artifactId>
<version>1.3.4</version>
</dependency>
<!-- selenium测试工具使用的phantomjs驱动 -->
<dependency>
<groupId>com.codeborne</groupId>
<artifactId>phantomjsdriver</artifactId>
<version>1.4.4</version>
</dependency>
二，项目目录结构
三，建立要用的js（echarts-screenshot.js）
function Base64() {
// private property
_keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
// public method for encoding
this.encode = function (input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = _utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
_keyStr.charAt(enc3) + _keyStr.charAt(enc4);
}
return output;
}
// public method for decoding
this.decode = function (input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = _keyStr.indexOf(input.charAt(i++));
enc2 = _keyStr.indexOf(input.charAt(i++));
enc3 = _keyStr.indexOf(input.charAt(i++));
enc4 = _keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
output = _utf8_decode(output);
return output;
}
// private method for UTF-8 encoding
_utf8_encode = function (string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
} else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
} else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
}
// private method for UTF-8 decoding
_utf8_decode = function (utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while ( i < utftext.length ) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
} else if((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i+1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
} else {
c2 = utftext.charCodeAt(i+1);
c3 = utftext.charCodeAt(i+2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
// /////////////////////////////////
system = require('system'); // 获取参数
//传递过来的数据
var base64JsonStr = system.args[1];
//截屏文件保存路径
var screenshotPath = system.args[2];
// 将base64解密
var paramsJsonStr = new Base64().decode(base64JsonStr) ;
// 转换为json对象
var jsonObj = JSON.parse(paramsJsonStr);
//Echarts的Option参数
var option = jsonObj.option ;
//截图屏幕的宽高值
var clipWidth = jsonObj.clipWidth ;
var clipHeight = jsonObj.clipHeight ;
function Convert(params){
this.params = params ;
this.external = {
JQUERY3 : 'jquery-1.9.0rc1.js',
ECHARTS3 : 'echarts3.8.4.min.js'
};
this.page = require('webpage').create(); // 客户端
this.page.viewportSize = { width: clipWidth, height: clipHeight };
// 日志监听console,防止有些内部方法控制台不显示
this.page.onConsoleMessage = function(msg, lineNum, sourceId) {
console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');
};
var instance = this ;
this.page.onError = function(msg, trace) {
var msgStack = ['PHANTOM ERROR: ' + msg];
if (trace && trace.length) {
msgStack.push('TRACE:');
trace.forEach(function(t) {
msgStack.push(' -> ' + (t.file || t.sourceURL) + ': ' + t.line + (t.function ? ' (in function ' + t.function +')' : ''));
});
}
console.error(msgStack.join('\n'));
//失败,返回错误信息
instance.output("", false, msg);
};
this.page.onLoadStarted = function() {
console.log('Start loading...');
};
this.page.onLoadFinished = function (status) {
console.log('Loading finished.');
};
// 加载资源监听
this.page.onResourceReceived = function (res) {
console.log('Response (#' + res.id + ', stage =' + res.stage + ', code = ' + res.status + ', redirect= ' + res.redirectURL + ') ');
};
console.log("实例化完成");
}
Convert.prototype.init = function(){
var instance = this ;
instance.page.open("about:blank", function(status) {
// 把指定的外部JS文件注入到当前环境
var hasJquery = instance.page.injectJs(instance.external.JQUERY3);
var hasEchart = instance.page.injectJs(instance.external.ECHARTS3);
// 检查js是否引用成功
if (!hasJquery || !hasEchart) {
instance.output("Could not found " + instance.external.JQUERY3 + " or " + instance.external.ECHARTS3, false);
}
// 第一个为交互执行的方法; 第二个为传递给函数的参数
instance.page.evaluate(instance.createEchartsDom,instance.params);
// 定义剪切范围，若是定义则截取全屏
instance.page.clipRect = {
top : 0,
left : 0,
width : clipWidth,
height : clipHeight
};
// 渲染
var result = instance.render();
// 成功输出，返回图片或其余信息
instance.output(result, true);
});
}
Convert.prototype.render = function(){
var instance = this ;
switch (instance.params.type) {
case 'file':
instance.page.render(screenshotPath);
return screenshotPath;
case 'base64':
default:
var base64 = instance.page.renderBase64('PNG');
return base64;
}
}
Convert.prototype.output = function(content, success, msg) {
var instance = this ;
console.log(success ? "[SUCCESS]:" : "[ERROR]:" + content);
instance.page.close();
instance.exit(instance.params);
};
Convert.prototype.exit = function (params) {
console.log("退出phantom") ;
phantom.exit()
};
//
// 建立eCharts Dom层
// @param params 参数
// params.opt
// params.width
// params.height
// params.outfile
// params.type = 'PNG'
//
Convert.prototype.createEchartsDom = function(params) {
var instance = this ;
var options = params.option ;
// 动态加载js，获取options数据
$('<script>')
.attr('type', 'text/javascript')
.appendTo(document.head);
// 取消动画,不然生成图片过快，会出现无数据
if (options !== undefined) {
options.animation = false;
}
// body背景设置为白色
$(document.body).css('backgroundColor', 'white');
// echarts容器
var container = $("<div>")
.attr('id', 'container')
.css({
width : params.clipWidth,
height : params.clipHeight
}).appendTo(document.body);
var eChart = echarts.init(container[0]);
eChart.setOption(options);
} ;
// 构建,入口
new Convert(jsonObj).init();
四，Java代码
1：截屏操做接口
/**
* 进行屏幕的截屏操做
*/
public interface ScreenshotProvider {
/**
* 根据参数判断是否支持
*/
boolean support(ScreenshotParam param);
/**
* 执行屏幕裁剪
*/
ScreenshotResult clip(ScreenshotParam param) throws Exception;
}
2：ScreenshotParam
public class ScreenshotParam {
/**
* 访问的url地址；格式如：
* 1：about:blank <br />
* 2：file///:/path/to/demo.html <br />
* 3：https://www.baidu.com <br />
* */
private String url ;
// 剪裁宽度
private Integer clipWidth = 500 ;
// 剪裁高度
private Integer clipHeight = 400 ;
}
3：ScreenshotResult
public class ScreenshotResult {
// 截图保存路径
private String screenshotPath;
public ScreenshotResult() {
}
public ScreenshotResult(ScreenshotResult result) {
if(result == null) {
return ;
}
this.screenshotPath = result.getScreenshotPath() ;
}
public ScreenshotResult(String screenshotPath) {
this.screenshotPath = screenshotPath;
}
}
4：ScreenshotManager
@Component
public class ScreenshotManager {
@Autowired
public List<ScreenshotProvider> providers = new ArrayList<ScreenshotProvider>() ;
/**
* 执行屏幕裁剪
* @throws Exception
* */
public ScreenshotResult clip(ScreenshotParam param) throws Exception {
for(ScreenshotProvider provider:providers) {
if(!provider.support(param)) {
continue ;
}
return provider.clip(param) ;
}
return null ;
}
}
5：PhantomjsScreenshotProvider
/**
* 经过Phantomjs来执行JavaScript文件 <br />
* github.com/ariya/phantomjs/tree/master/examples
*/
public abstract class PhantomjsScreenshotProvider implements ScreenshotProvider {
private Logger log = LoggerFactory.getLogger(PhantomjsScreenshotProvider.class);
protected static String BLANK = " ";
@Value("${screenshotDir:}")
protected String screenshotDir;
@Value("${phantomjsPath:}")
protected String phantomjsPath;
// rasterize.js
protected String jsFilePath;
@PostConstruct
public void init() {
if (StringUtils.isBlank(screenshotDir)) {
try {
File classPathDir = ResourceUtils.getFile(ResourceUtils.CLASSPATH_URL_PREFIX);
File dir = new File(classPathDir.getAbsolutePath() + "/screenshot/phantomjs/echarts/images");
if (!dir.exists() || !dir.isDirectory()) {
dir.mkdirs();
}
screenshotDir = dir.getAbsolutePath();
log.info("screenshotDir:{}", screenshotDir);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
if (StringUtils.isBlank(phantomjsPath)) {
try {
File exeFile = null;
if (OSUtil.isLinux() || OSUtil.isMacOSX()) {
exeFile = ResourceUtils
.getFile(ResourceUtils.CLASSPATH_URL_PREFIX + "drivers/phantomjs/v2.1.1/linux64/phantomjs");
} else {
exeFile = ResourceUtils.getFile(
ResourceUtils.CLASSPATH_URL_PREFIX + "drivers/phantomjs/v2.1.1/window/phantomjs.exe");
}
phantomjsPath = exeFile.getAbsolutePath();
log.info("phantomjsPath:{}", phantomjsPath);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
if (StringUtils.isBlank(jsFilePath)) {
try {
// 执行的JS文件路径
File jsFile = ResourceUtils.getFile("classpath:static/js/rasterize.js");
// 生成的图片名称
jsFilePath = jsFile.getAbsolutePath();
log.info("jsFilePath:{}", jsFilePath);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
}
// 生成图片的所存放路径
protected String getRandomImagePath() {
String outPath = screenshotDir + File.separator + new SimpleDateFormat("yyyyMMddHHmmss").format(new Date())
+ "-" + new Random().nextInt() + ".png";
return outPath;
}
// 执行cmd命令
protected String commandLine(String url, String screenshotPath) {
return phantomjsPath + BLANK + jsFilePath + BLANK + url + BLANK + screenshotPath;
}
protected void exeCommandLine(String commandLine) throws IOException {
// Java中使用Runtime和Process类运行外部程序
Process process = Runtime.getRuntime().exec(commandLine);
InputStream inputStream = process.getInputStream();
BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream));
String tmp = "";
StringBuffer sb = new StringBuffer();
while ((tmp = reader.readLine()) != null) {
sb.append(tmp);
}
close(process, reader);
}
// 关闭命令
protected void close(Process process, BufferedReader bufferedReader) throws IOException {
if (bufferedReader != null) {
bufferedReader.close();
}
if (process != null) {
process.destroy();
process = null;
}
}
public String getScreenshotDir() {
return screenshotDir;
}
public void setScreenshotDir(String screenshotDir) {
this.screenshotDir = screenshotDir;
}
public String getPhantomjsPath() {
return phantomjsPath;
}
public void setPhantomjsPath(String phantomjsPath) {
this.phantomjsPath = phantomjsPath;
}
public String getJsFilePath() {
return jsFilePath;
}
public void setJsFilePath(String jsFilePath) {
this.jsFilePath = jsFilePath;
}
}
6： EchartsScreenshotProvider
@Component
public class EchartsScreenshotProvider extends PhantomjsScreenshotProvider {
private Logger log = LoggerFactory.getLogger(EchartsScreenshotProvider.class);
@PostConstruct
public void init() {
if (StringUtils.isBlank(jsFilePath)) {
try {
// 执行的JS文件路径
File jsFile = ResourceUtils.getFile("classpath:static/js/echarts-screenshot.js");
// 生成的图片名称
jsFilePath = jsFile.getAbsolutePath();
log.info("jsFilePath:{}", jsFilePath);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
super.init();
}
@Override
public boolean support(ScreenshotParam param) {
return param instanceof EchartsScreenshotParam;
}
@Override
public ScreenshotResult clip(ScreenshotParam param) throws Exception {
EchartsScreenshotParam echartsScreenshotParam = (EchartsScreenshotParam) param;
if (echartsScreenshotParam == null || echartsScreenshotParam.getOption() == null) {
throw new Exception("参数不能为空") ;
}
if(StringUtils.isBlank(jsFilePath)) {
throw new Exception("执行的js文件不能为空") ;
}
//屏幕截图的保存位置
String screenshotPath = getRandomImagePath();
// 实例化
Gson gson = new Gson();
// 将map转成JSON
String paramsJsonStr = gson.toJson(echartsScreenshotParam);
Encoder encoder = Base64.getEncoder();
// 转换为base64编码是为了防止执行指令的时候出问题
String base64Str = encoder.encodeToString(paramsJsonStr.getBytes("UTF-8"));
String[] args = new String[3];
args[0] = jsFilePath;
args[1] = base64Str;
args[2] = screenshotPath;
// 执行脚本
try {
CommandExecUtil.exec(phantomjsPath, args, null) ;
} catch (Exception e) {
throw e;
}
return new ScreenshotResult(screenshotPath);
}
}
7：EchartsScreenshotParam
/**
* 使用Echarts的数据来渲染出图片并截取
*/
public class EchartsScreenshotParam extends ScreenshotParam {
// echart的Option
public Option option;
public String type = "file";
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public Option getOption() {
return option;
}
public void setOption(Option option) {
this.option = option;
}
}
8, CommandExecUtil
public class CommandExecUtil {
/**
* @param commandLine
* 须要执行的命令行，例如："AcroRd32.exe /p /h c://file.pdf"
*/
public static int exec(String commandLine) throws Exception {
CommandLine cmdLine = CommandLine.parse(commandLine);
DefaultExecutor executor = new DefaultExecutor();
int exitValue = executor.execute(cmdLine);
return exitValue;
}
/**
* @param command
* 命令，例如：AcroRd32.exe
* @param args
* 参数，例如：/C , /p, /h
*/
public static int exec(String command, String[] args, Map<String, ?> substitutionMap) throws Exception {
CommandLine cmdLine = new CommandLine(command);
if (args != null && args.length > 0) {
for (String arg : args) {
cmdLine.addArgument(arg);
}
}
if (substitutionMap != null) {
cmdLine.setSubstitutionMap(substitutionMap);
}
DefaultExecutor executor = new DefaultExecutor();
// executor.setExitValue(1);
// ExecuteWatchdog watchdog = new ExecuteWatchdog(60000);
// executor.setWatchdog(watchdog);
int exitValue = executor.execute(cmdLine);
return exitValue;
}
}
9： Controller中测试
@Tag(name = "屏幕截图", description = "截屏测试控制器")
@RestController
@RequestMapping(path = "/screenshot")
public class ScreenshotController {
@Autowired
private ScreenshotManager manager;
@Operation(summary = "使用Freemarker生成html并截图", description = "", tags = { "屏幕截图" })
@GetMapping(path = "/freemarker")
public ScreenshotResult freemarkerScreenshot(String templateName) throws Exception {
FreemarkerSeleniumScreenshotParam param = new FreemarkerSeleniumScreenshotParam(DriverTypeEnum.PhantomJS);
param.setTemplatePath(templateName);
param.setClipWidth(600);
param.setClipHeight(500);
return manager.clip(param);
}
@Operation(summary = "使用Selenium截图", description = "", tags = { "屏幕截图" })
@GetMapping(path = "/selenium/phantomjs")
public ScreenshotResult seleniumScreenshot(String url) throws Exception {
SeleniumScreenshotParam param = new SeleniumScreenshotParam(DriverTypeEnum.PhantomJS);
param.setUrl(url);
return manager.clip(param);
}
@Operation(summary = "使用phantomjs进行echarts截图", description = "", tags = { "屏幕截图" })
@GetMapping(path = "/phantomjs/echarts")
public ScreenshotResult phantomjsEchartsScreenshot() throws Exception {
EchartsScreenshotParam param = new EchartsScreenshotParam();
param.setOption(getEchartOption());
return manager.clip(param);
}
public Option getEchartOption() {
Option option = new Option();
option.legend("this is the legend");
option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line, Magic.bar),
Tool.restore, Tool.saveAsImage);
option.calculable(true);
option.tooltip().trigger(Trigger.axis).formatter("Temperature : <br/>{b}km : {c}°C");
ValueAxis valueAxis = new ValueAxis();
valueAxis.axisLabel().formatter("{value} °C");
option.xAxis(valueAxis);
CategoryAxis categoryAxis = new CategoryAxis();
categoryAxis.axisLine().onZero(false);
categoryAxis.axisLabel().formatter("{value} km");
categoryAxis.boundaryGap(false);
categoryAxis.data(0, 10, 20, 30, 40, 50, 60, 70, 80);
option.yAxis(categoryAxis);
Line line = new Line();
line.smooth(true).name("line ssss").data(15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5).itemStyle()
.normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");
option.series(line);
return option;
}
public ScreenshotManager getManager() {
return manager;
}
public void setManager(ScreenshotManager manager) {
this.manager = manager;
}
}
以上是经过命令行的方式启动phantomjs并执行JS文件后将Echarts图片截取下来的过程；除了这种方式外，还能够经过selenium来配合完成，例如如下代码：javascript
SeleniumPhantomjsScreenshotProvider
/**
* Some of the examples of Headless Drivers include <br />
* 1,HtmlUnit <br />
* 2,Ghost <br />
* 3,PhantomJS <br />
* 4,ZombieJS <br />
* 5,Watir-webdriver <br />
* */
@Component
public class SeleniumPhantomjsScreenshotProvider implements ScreenshotProvider {
private static final Logger log = LoggerFactory.getLogger(SeleniumPhantomjsScreenshotProvider.class);
@Value("${screenshotDir:}")
protected String screenshotDir;
@Value("${phantomjsPath:}")
protected String phantomjsPath;
@PostConstruct
public void init() {
if (StringUtils.isBlank(screenshotDir)) {
try {
File classPathDir = ResourceUtils.getFile(ResourceUtils.CLASSPATH_URL_PREFIX);
File dir = new File(classPathDir.getAbsolutePath() + "/screenshot/selenium/phantomjs/images");
if (!dir.exists() || !dir.isDirectory()) {
dir.mkdirs();
}
screenshotDir = dir.getAbsolutePath();
log.info("screenshotDir:{}", screenshotDir);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
if (StringUtils.isBlank(phantomjsPath)) {
try {
File exeFile = null;
if (OSUtil.isLinux() || OSUtil.isMacOSX()) {
exeFile = ResourceUtils
.getFile(ResourceUtils.CLASSPATH_URL_PREFIX + "drivers/phantomjs/v2.1.1/linux64/phantomjs");
} else {
exeFile = ResourceUtils.getFile(
ResourceUtils.CLASSPATH_URL_PREFIX + "drivers/phantomjs/v2.1.1/window/phantomjs.exe");
}
phantomjsPath = exeFile.getAbsolutePath();
log.info("phantomjsPath:{}", phantomjsPath);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
}
// 生成图片的所存放路径
protected String getRandomImagePath() {
String outPath = screenshotDir + File.separator + new SimpleDateFormat("yyyyMMddHHmmss").format(new Date())
+ "-" + new Random().nextInt() + ".png";
return outPath;
}
@Override
public boolean support(ScreenshotParam param) {
if(!(param instanceof SeleniumScreenshotParam)) {
return false ;
}
SeleniumScreenshotParam params = (SeleniumScreenshotParam)param ;
return params.getDriverType() == DriverTypeEnum.PhantomJS ;
}
@Override
public ScreenshotResult clip(ScreenshotParam param) throws Exception {
return new ScreenshotResult(getPicByPhantomjs(param));
}
private String getPicByPhantomjs(ScreenshotParam param) throws Exception {
log.warn("使用phantomjs截图连接:{}", param.getUrl());
// 定义图片存储路径
DesiredCapabilities capabilities = new DesiredCapabilities(BrowserType.PHANTOMJS, "", Platform.ANY);
WebDriver driver = null;
try {
// ssl证书支持
capabilities.setCapability(CapabilityType.ACCEPT_SSL_CERTS, true);
// 截屏支持
capabilities.setCapability(CapabilityType.TAKES_SCREENSHOT, true);
// css搜索支持
capabilities.setCapability(CapabilityType.SUPPORTS_FINDING_BY_CSS, true);
// js支持
capabilities.setJavascriptEnabled(true);
capabilities.setCapability(CapabilityType.SUPPORTS_LOCATION_CONTEXT, true);
capabilities.setCapability(CapabilityType.SUPPORTS_NETWORK_CONNECTION, true);
// defines whether to execute the script in the page or not (defaults to true).
capabilities.setCapability("phantomjs.page.settings.javascriptEnabled", true);
// defines whether to load the inlined images or not (defaults to true)
capabilities.setCapability("phantomjs.page.settings.loadImages", true);
// defines whether local resource (e.g. from file) can access remote URLs or not
// (defaults to false).
capabilities.setCapability("phantomjs.page.settings.localToRemoteUrlAccessEnabled", true);
// sets the user name used for HTTP authentication.
// capabilities.setCapability("phantomjs.page.settings.userName", "");
// sets the password used for HTTP authentication.
// capabilities.setCapability("phantomjs.page.settings.password", "");
// defines whether web security should be enabled or not (defaults to true).
capabilities.setCapability("phantomjs.page.settings.webSecurityEnabled", true);
// (in milli-secs) defines the timeout after which any resource requested will
// stop trying and proceed with other parts of the page.
// capabilities.setCapability("phantomjs.page.settings.resourceTimeout", 5000);
capabilities.setCapability("phantomjs.page.settings.userAgent",
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0");
capabilities.setCapability("phantomjs.page.customHeaders.User-Agent",
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0");
// 驱动支持（第二参数代表的是你的phantomjs引擎-例如phantomjs.exe所在的路径）
capabilities.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, phantomjsPath);
// 建立***面浏览器对象
driver = new PhantomJSDriver(capabilities);
driver.manage().window().setSize(new Dimension(param.getClipWidth(), param.getClipHeight()));
// 设置隐性等待（做用于全局）
driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS).pageLoadTimeout(20, TimeUnit.SECONDS);
// 发起请求
try {
driver.get(param.getUrl());
} catch (Exception e) {
log.error("开发地址 {} 发生异常:{}", param.getUrl(), e.getMessage());
throw e;
}
try {
Thread.sleep(4 * 1000);
} catch (InterruptedException e) {
}
// 指定了OutputType.FILE作为参数传递给getScreenshotAs()方法，其含义是将截取的屏幕以文件形式返回。
File srcFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
try {
Thread.sleep(2 * 1000);
} catch (InterruptedException e) {
}
// 利用FileUtils工具类的copyFile()方法保存getScreenshotAs()返回的文件对象
String outFilePath = this.getRandomImagePath();
FileUtils.copyFile(srcFile, new File(outFilePath));
return outFilePath;
} catch (Exception e) {
log.error("使用phantomjs截图时异常：{}", e.getMessage());
throw e;
} finally {
if (driver != null) {
driver.close();
driver.quit();
}
}
}
protected void scrollWindow(JavascriptExecutor js) {
// 页面下滑10次,每次下滑加载2s
for (int i = 0; i < 10; i++) {
js.executeScript("window.scrollBy(0,1000)"); // 睡眠2s等js加载完成
try {
Thread.sleep(2 * 1000);
} catch (InterruptedException e) {
}
}
}
protected void clickAction(PhantomJSDriver driver, String elementClassName) {
if (elementExist(driver, By.className(elementClassName))) {
WebElement inputBox = driver.findElement(By.className(elementClassName));
Actions action = new Actions(driver);
action.click(inputBox).build().perform(); // 元素点击 后等待加载
try {
Thread.sleep(2 * 1000);
} catch (InterruptedException e) {
}
}
}
private boolean elementExist(PhantomJSDriver driver, By by) {
return driver.findElement(by) == null ? false : true;
}
}
SeleniumScreenshotParam
public class SeleniumScreenshotParam extends ScreenshotParam{
//使用的驱动器的类型
private DriverTypeEnum driverType ;
public SeleniumScreenshotParam(DriverTypeEnum driverType) {
this.driverType = driverType ;
}
public DriverTypeEnum getDriverType() {
return driverType;
}
}
DriverTypeEnum
public enum DriverTypeEnum {
PhantomJS,HtmlUnit,ZombieJS;
}
相关文章
- 1. phantomjs server + highchart 在服务器端生成highchart图表图片
- 2. Echarts服务端生成图片
- 3. 使用动态图层在服务器端渲染
- 4. SSR 服务器端渲染
- 5. vue服务器端渲染
- 6. 服务器端渲染SSR
- 7. ssr服务器端渲染
- 8. 服务端渲染&&客户端渲染
- 9. 服务端渲染和前端渲染
- 10. 服务器端渲染VS浏览器端渲染
- 更多相关文章...
- • XSLT - 在服务器端 - XSLT 教程
- • 服务端脚本 指南 - 网站建设指南
- • Spring Cloud 微服务实战(三) - 服务注册与发现
- • TiDB 在摩拜单车在线数据业务的应用和实践
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. phantomjs server + highchart 在服务器端生成highchart图表图片
- 2. Echarts服务端生成图片
- 3. 使用动态图层在服务器端渲染
- 4. SSR 服务器端渲染
- 5. vue服务器端渲染
- 6. 服务器端渲染SSR
- 7. ssr服务器端渲染
- 8. 服务端渲染&&客户端渲染
- 9. 服务端渲染和前端渲染
- 10. 服务器端渲染VS浏览器端渲染