输入链接生成网页截图

背景:

项目中想要对某个页面进行截图,作为缩略图展示,但是希望在后台自动进行,而不需要用户手动执行。所以能想到的办法就是通过前端给一个链接,后端在链接上拼接对应的参数,来获取指定的页面,然后通过一个方法,对输入的网页进行截图保存。

实现:

在Java中实现对一个给定链接的网页内容加载完毕后进行截图并保存,通常需要结合浏览器内核(如使用headless模式的Chrome或Firefox)和自动化工具。以下是一个基于Selenium WebDriver与Chromedriver的示例步骤:

引入依赖

(需要注意selenium-java这个依赖中并不包含最新版本的selenium其他依赖,所以要手动加一下,否则其他依赖都是很老的版本,会有找不到类的报错)

        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-java</artifactId>
            <version>4.16.1</version>
        </dependency>
        <dependency>
            <groupId>io.github.bonigarcia</groupId>
            <artifactId>webdrivermanager</artifactId>
            <version>5.6.3</version>
        </dependency>
        <dependency>
            <groupId>org.apache.httpcomponents.client5</groupId>
            <artifactId>httpclient5</artifactId>
            <version>5.3</version>
        </dependency>
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-api</artifactId>
            <version>4.16.1</version>
        </dependency>
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-chrome-driver</artifactId>
            <version>4.16.1</version>
        </dependency>
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-remote-driver</artifactId>
            <version>4.16.1</version>
        </dependency>
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-support</artifactId>
            <version>4.16.1</version>
        </dependency>

测试代码

        public static void main(String[] args) {
        // 设置ChromeDriver路径(如果WebDriverManager未自动处理)
        WebDriverManager.chromedriver().setup();

        // 启用Headless模式(可选,用于无界面截图)
        ChromeOptions options = new ChromeOptions();
        options.addArguments("--headless", "--disable-gpu");
        options.addArguments("--window-size=1920,1080");

        // 创建WebDriver实例
        WebDriver driver = new ChromeDriver(options);
        try {
            List<String> urls = new ArrayList<>();
            urls.add("https://www.baidu.com/");
            urls.add("https://www.jianshu.com/");
            urls.forEach(url -> {
                driver.get(url);

                try {
                    Thread.sleep(3000); // 延迟5秒,仅供参考,请根据实际情况调整
                } catch (InterruptedException e) {
                    throw new RuntimeException(e);
                }

                // 截取全屏图片
                TakesScreenshot takesScreenshot = (TakesScreenshot) driver;
                byte[] screenshotData = takesScreenshot.getScreenshotAs(OutputType.BYTES);

                // 保存截图到文件
                BufferedImage fullImage;
                try {
                    fullImage = ImageIO.read(((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE));
                } catch (IOException e) {
                    throw new RuntimeException(e);
                }

                // 保存全屏截图到本地,根据URL生成不同的文件名
                String fileName = url.replaceAll("[^a-zA-Z0-9]", "_") + ".png";
                File screenshotFile = new File(fileName);
                try {
                    ImageIO.write(fullImage, "PNG", screenshotFile);
                } catch (IOException e) {
                    throw new RuntimeException(e);
                }

                driver.navigate().refresh();
            });
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            // 关闭浏览器
            driver.quit();
        }
    }

以上是在本地运行时所使用的代码,当部署到服务器上时,与本地运行大有不同(因为本地装有谷歌浏览器)

在生产环境中使用的方法如下

安装chrome镜像

selenium有专门的谷歌浏览器以及驱动镜像,直接拉取这个镜像selenium/standalone-chrome(它包含了 Selenium Grid 服务器和一个预配置好的 Chrome 浏览器环境。使用这个镜像无需在本地安装和配置 Selenium 以及浏览器驱动)。在容器中运行,命令是docker run -d -p 4444:4444 --shm-size=2g selenium/standalone-chrome,其中--shm-size=2g是用于设置容器的共享内存大小(如果没有足够的共享内存,浏览器可能会遇到性能问题或直接崩溃)。

@PostMapping(value = "/test")
    public void test() throws MalformedURLException {
        // 启用Headless模式(可选,用于无界面截图)
        ChromeOptions options = new ChromeOptions();
        options.addArguments("--disable-gpu");
        options.addArguments("--window-size=1920,1080");
        DesiredCapabilities capabilities = new DesiredCapabilities();
        capabilities.setCapability(ChromeOptions.CAPABILITY, options);
        // 创建指向Selenium Grid的RemoteWebDriver实例,url部分为容器中的chrome地址
        WebDriver driver = new RemoteWebDriver(new URL("http://0.0.0.0:4444/wd/hub"), capabilities);
        try {
            List<String> urls = new ArrayList<>();
            urls.add("https://www.baidu.com/");
            urls.add("https://www.jianshu.com/");
            urls.forEach(url -> {
                driver.get(url);

                try {
                    Thread.sleep(10000); // 延迟5秒,仅供参考,请根据实际情况调整
                } catch (InterruptedException e) {
                    throw new RuntimeException(e);
                }

                // 保存截图到文件
                BufferedImage fullImage;
                try {
                    fullImage = ImageIO.read(((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE));
                } catch (IOException e) {
                    throw new RuntimeException(e);
                }

                // 保存全屏截图到本地,根据URL生成不同的文件名
                String fileName = url.replaceAll("[^a-zA-Z0-9]", "_") + ".png";
                File screenshotFile = new File(fileName);
                try {
                    ImageIO.write(fullImage, "PNG", screenshotFile);
                } catch (IOException e) {
                    throw new RuntimeException(e);
                }

                driver.navigate().refresh();
            });
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            // 关闭浏览器
            driver.quit();
        }
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容