前言：最近折騰了一個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"));

我們可以通過元素定位的方法來截圖，是不是很方便？

未完待續

總結

以上是生活随笔為你收集整理的java后台截图_Java+Selenium实现后台截图网页，可运行在树莓派上的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。