java后台截图_Java+Selenium实现后台截图网页，可运行在树莓派上
前言：最近折腾了一个QQ机器人，突然有个灵感。当用户发送一个网页链接时，我想使用Java对网页进行截图，然后将截图文件发回到QQ上，感觉这个功能很酷炫，于是昨天(2020-10-29)研究了一晚上，下面对截图功能这个部分进行总结。
一. 概述
首先我在网上查询了相关资料(并不多)，最常见的两种方案：
使用 Java 自带的 Robot 类，对电脑屏幕进行截图，不建议使用。
使用 Selenium 工具，对游览器进行截图。
由于最后想要运行在树莓派上(ARM 32位)，遇到了不少问题。
受限于树莓派zero的性能，生成一张截图可能要30s左右。
二. 准备与安装方案一：使用Java自带Robot类
只需要 JDK1.6 及以上版本即可。
方案二：使用Selenium
第一步：
安装 chrome 游览器：
1
2
3#Linux 上建议使用chromium
sudo apt install chromium-browser
#Win和Mac可直接在官网下载
在 chrome 游览器中，或者命令行执行 chromium-browser --version 查看版本号
并在下面的链接中下载相应版本号的 chromedriver，解压后即可使用。
注意：如果你使用的是32位的Linux(例如树莓派)或者没有找到相应的版本号，建议使用命令去安装：
1
2
3
4#安装chromedriver
sudo apt-get install chromium-chromedriver
#查看chromedriver的安装位置
dpkg -L chromium-chromedriver
第二步：
添加 commons-io 与 selenium 依赖，以 Maven 为例。
1
2
3
4
5
6
7
8
9
10
11
12
org.seleniumhq.selenium
selenium-java
3.141.59
commons-io
commons-io
2.8.0
三. 代码实现方案一：使用Java自带Robot类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15Desktop.getDesktop().browse(new URL(url).toURI());
Robot robot = new Robot();
Dimension d = new Dimension(Toolkit.getDefaultToolkit().getScreenSize());
int width = (int) d.getWidth();
int height = (int) d.getHeight();
// 最大化浏览器
robot.keyRelease(KeyEvent.VK_F11);
Image image = robot.createScreenCapture(new Rectangle(0, 0, width,
height));
BufferedImage bi = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics g = bi.createGraphics();
g.drawImage(image, 0, 0, width, height, null);
// 保存图片 注意替换文件路径
ImageIO.write(bi, "jpg", new File("/Users/ming/Desktop/temp/" + System.currentTimeMillis()+".jpg"));
方案二：使用Selenium
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
28public void screenshot(String url) throws IOException{
//设置系统参数，第二个参数要指向chromedriver的位置
System.setProperty("webdriver.chrome.driver", "/usr/bin/chromedriver");
ChromeOptions options = new ChromeOptions();
options.addArguments("--headless"); // 无窗口模式
options.addArguments("--disable-infobars"); // 禁言消息条(就上面经常一条黄色的那个)
options.addArguments("--disable-extensions"); // 禁用插件
options.addArguments("--disable-gpu"); // 禁用GPU
options.addArguments("--no-sandbox"); // 禁用沙盒模式否则会报错
options.addArguments("--disable-dev-shm-usage");
options.addArguments("--hide-scrollbars"); // 隐藏滚动条
options.addArguments("--window-size=375,190"); // 设置开启游览器时的分辨率，如果在树莓派运行建议不要设置此项
//启动chrome实例
WebDriver driver = new ChromeDriver(options);
// 设置游览器打开后调整大小
// driver.manage().window().setSize(new Dimension(1920, 1080));
//访问指定url
driver.get(url);
//指定了OutputType.FILE做为参数传递给getScreenshotAs()方法，其含义是将截取的屏幕以文件形式返回。
File srcFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
//利用FileUtils工具类的copyFile()方法保存getScreenshotAs()返回的文件对象。
FileUtils.copyFile(srcFile, new File("/home/project/screenshot.png"));
//关闭浏览器
driver.quit();
}
注意：如果在树莓派上运行，要按照上面的参数去设置，否则会报一些奇奇怪怪的错误。
如果想对页面的 特定区域 进行截图呢？请往下继续看。
四. Selenium中花里胡哨的操作
元素定位
首先，Selenium提供定位元素的方法：driver.findElement()
方式
示例
根据Id查找
driver.findElement(By.id(“id”))
根据name查找
driver.findElement(By.name(“name”))
根据链接的全部文本查找
driver.findElement(By.linkText(“linkText”))
根据链接的部分文本查找
driver.findElement(By.partialLinkText(“partialLinkText”))
根据ClassName查找
driver.findElement(By.className(“className”))
根据tagName查找
driver.findElement(By.tagName(“tagName”))
根据xpath查找
driver.findElement(By.xpath(“xpath”))
表单输入与提交
除此之外，还可以模拟在游览器中输入表单并提交
1
2
3driver.findElement(By.name("firstname")).sendKeys("Lei");//输入字串
driver.findElement(By.name("lastname")).sendKeys("Hou");
driver.findElement(By.id("submit")).click();
截图指定区域
下面直接上代码。
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66public File elementSnapshot(WebElement element) throws Exception{
//创建全屏截图
File screen = ((TakesScreenshot) this.driver).getScreenshotAs(OutputType.FILE);
BufferedImage image = ImageIO.read(screen);
//获取元素的高度、宽度
int width = element.getSize().getWidth();
int height = element.getSize().getHeight();
//创建一个矩形使用上面的高度，和宽度
Rectangle rect = new Rectangle(width, height);
//元素坐标
Point p = element.getLocation();
//对前面的矩形进行操作
//TODO 使用可以截全图的方法(滚动条)，暂未找到方式
int w = rect.width; //指定矩形区域的宽度
int h = rect.height;//指定矩形区域的高度
int x = p.getX(); //指定矩形区域左上角的X坐标
int y = p.getY(); //指定矩形区域左上角的Y坐标
//driver的分辨率，这里设置1920*1080
int w_driver = 1920;
int h_driver = 1080;
System.out.println("width:" + w);
System.out.println("height:" + h);
System.out.println("x:" + x);
System.out.println("y:" + y);
System.out.println("y+height:" + (y + h));
System.out.println("x+width:" + (x + w));
/**
* 如果Element的Y坐标值加上高度超过driver的高度
* 就会报错(y + height) is outside or not
* 退而求其次，调整图片的宽度和高度, 调整到适合driver的分辨率
* 此时会截图driver可见的元素区域快照
* TODO 如果能找到跨滚动条截图的方式，可以不用裁剪
*/
try {
if (y + h > h_driver) {
h = h - (y + h - h_driver); //
System.out.println("修改后的height:" + h);
System.out.println("修改后的y+height：" + (y + h));
}
//(x + width) is outside or not
if (x + w > w_driver) {
w = x - (x + w - w_driver);
System.out.println("修改后的width：" + w);
System.out.println("修改后的x+width:" + (x + w));
}
BufferedImage img = image.getSubimage(x, y, w, h);
ImageIO.write(img, "png", screen);
System.out.println("Screenshot By element success");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return screen;
}
那么传进去的参数： WebElement 怎么获取呢？
1
2
3
4// 通过driver获取页面
driver.get(url);
// 定位到class名为pyqBox的标签
WebElement element = driver.findElement(By.className("pyqBox"));
我们可以通过元素定位的方法来截图，是不是很方便？
未完待续