0️⃣ 关于使用场景

这边是一个还在开发中的个人主页，鼠标移入时展示预览，我在服务端设置了一个任务，每隔一段时间对本站进行截图 & 保存，页面则根据一个固定的链接来获取这张图片

1️⃣ Before

在此之前需要先安装好 Chrome

https://chromium.cypress.io/linux/

2️⃣ Maven

<!-- https://mvnrepository.com/artifact/io.github.bonigarcia/webdrivermanager -->
        <dependency>
            <groupId>io.github.bonigarcia</groupId>
            <artifactId>webdrivermanager</artifactId>
            <version>5.3.3</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-java</artifactId>
            <version>4.9.1</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.apache.httpcomponents.client5/httpclient5 -->
        <dependency>
            <groupId>org.apache.httpcomponents.client5</groupId>
            <artifactId>httpclient5</artifactId>
            <version>5.2.1</version>
        </dependency>

3️⃣ Service Init

启动项目时将 ChromeDriver 先加载好

package com.axm.config;

import com.axm.service.SitePreviewService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.CommandLineRunner;
import org.springframework.context.annotation.Configuration;

/**
 * @Author: AceXiamo
 * @ClassName: ApplicationInit
 * @Date: 2023/5/24 14:44
 */
@Slf4j
@Configuration
public class ApplicationInit implements CommandLineRunner {

    @Autowired
    private SitePreviewService service;

    @Override
    public void run(String... args) {
        log.info("load chrome driver 😎");
        service.init();
    }

}

package com.axm.service;

import cn.hutool.core.thread.ThreadUtil;
import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.Dimension;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

/**
 * The type Site preview service.
 *
 * @Author: AceXiamo
 * @ClassName: SitePreviewService
 * @Date: 2023 /5/24 14:47
 */
@Service
public class SitePreviewService {

    private WebDriver webDriver;

    @Value("${selenium.font}")
    private String font;

    /**
     * Init.
     */
    public void init() {
        WebDriverManager.chromedriver().setup();
        WebDriverManager.getInstance().browserInDocker();

        ChromeOptions options = new ChromeOptions();
        options.addArguments("--headless");
        options.addArguments("--no-sandbox");
        options.addArguments("--disable-dev-shm-usage");
        options.addArguments("--remote-allow-origins=*");
        options.addArguments(font);
        webDriver = new ChromeDriver(options);
    }

    /**
     * Take screenshot byte [ ].
     *
     * @param url the url
     * @return the byte [ ]
     */
    public byte[] takeScreenshot(String url) {
        webDriver.get(url);
        webDriver.manage().window().setSize(new Dimension(1920, 1080));
        ThreadUtil.sleep(1000);
        TakesScreenshot screenshot = ((TakesScreenshot) webDriver);
        return screenshot.getScreenshotAs(OutputType.BYTES);
    }

}

byte[] bytes = service.takeScreenshot(url);

此后调用` takeScreenshot ` 即可获取当前 url 的实时截屏

4️⃣ Another

另外，之前我还在玩原神的时候，搭过一个Bot（YunzaiBot，查角色信息等等

其中图片生成大概就是利用 `网页截图` 来实现的，因为对Python不是很熟，所以也没细看

用 CSS & Html 来制作一张图片，对于Web开发者来说其实就十分友好了 👾