前言：最近折腾了一个QQ机器人，突然有个灵感。当用户发送一个网页链接时，我想使用Java对网页进行截图，然后将截图文件发回到QQ上，感觉这个功能很酷炫，于是昨天（2020-10-29）研究了一晚上，下面对截图功能这个部分进行总结。

一. 概述

首先我在网上查询了相关资料（并不多），最常见的两种方案：

  1. 使用 Java 自带的 Robot 类，对电脑屏幕进行截图，不建议使用。
  2. 使用 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，解压后即可使用。

chromedriver下载地址：http://npm.taobao.org/mirrors/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
<!--selenium-->
<dependency>
    <groupId>org.seleniumhq.selenium</groupId>
    <artifactId>selenium-java</artifactId>
    <version>3.141.59</version>
</dependency>
<!--commons-io-->
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.8.0</version>
</dependency>

三. 代码实现

方案一：使用Java自带Robot类

1
2
3
4
5
6
7
8
9
10
11
12
13
Desktop.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
28
public 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
3
driver.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
public 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"));

上述代码是通过元素定位的方法来截图，非常方便。