访问任意URL并截图

zdx0122

背景
之前看到国外有一个访问URL自动给截图的产品，看上去很简单，所以就编码实现了下，果然很简单，而且用chatgpt帮忙写了大部分的代码

演示
demo演示：https://screenshot.itest.ren/api/screenshot?url=http://52pojie.cn
替换掉url参数后的value为你想截图的网站域名即可


实现
1. 最核心的内容，就是使用playwright的headless模式进行访问URL并截图：

[Java] 纯文本查看 复制代码

    public CompletableFuture<File> takeScreenshot(String url) {
        // 异步执行截图任务，提交到线程池
        return CompletableFuture.supplyAsync(() -> {
            // 创建一个新的页面
            Page page = browser.newPage();
            page.navigate(url);

            page.waitForLoadState(NETWORKIDLE);

            String modifiedUrl = url.replaceAll("https?://", "");
            // 生成截图文件
            Path screenshotPath = Paths.get("screenshot-" + modifiedUrl + "-"+ System.currentTimeMillis() + ".png");
            page.screenshot(new Page.ScreenshotOptions().setPath(screenshotPath));

            // 关闭页面
            page.close();

            return screenshotPath.toFile();
        }, executorService);
    }

2. 之后使用Controller暴露出来SpringBoot的服务

[Java] 纯文本查看 复制代码

    @GetMapping("/api/screenshot")
    public CompletableFuture<ResponseEntity<byte[]>> getScreenshot(@RequestParam String url) {
        // 异步调用 ScreenshotService
        return screenshotService.takeScreenshot(url).thenApply(screenshot -> {
            try {
                // 将截图文件转换为字节数组
                byte[] imageBytes = Files.readAllBytes(screenshot.toPath());

                // 设置响应头为 image/png
                HttpHeaders headers = new HttpHeaders();
                headers.add(HttpHeaders.CONTENT_TYPE, "image/png");

                // 返回截图数据
                return new ResponseEntity<>(imageBytes, headers, HttpStatus.OK);
            } catch (IOException e) {
                return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
            }
        });
    }

代码开源
完整代码已开源，可自行搭建部署：https://github.com/zdx0122/playwright-screenshot-api


欢迎交流和提idea，可迭代开发

zzp007

ajmide 发表于 2024-10-30 15:39
这个使用场景是保存网页快照吗？ 直接把网页下载下来是不是更好啊，礼貌咨询者的使用场景

其实很多，比如说多平台集成，可以在一个综合平台看到这些多平台的页面；又或者是案例库的大页面案例缩略图

zdx0122

EVA不白嫖 发表于 2024-10-30 15:36
大佬可不可以搞全部下载的？

详细的描述下需求呢，我试试能不能开发支持下
保存为pdf、滑动页面录屏、录视频都是可以做到的

nolan022

这个小工具好呀，还代码开放了。赞

wakawaka1024

大佬，想问下这个产品有啥应用呢，感觉现在截图软件也都很方便

abozhu

大佬这个要怎么使用呢？浏览器插件还是本机运行的小程序？

EVA不白嫖

大佬可不可以搞全部下载的？

601541027

貌似提交的网页都是通过你的服务器去访问，会不会存在漏洞，比如别人提交的是一个挂马的网页？

ajmide

这个使用场景是保存网页快照吗？ 直接把网页下载下来是不是更好啊，礼貌咨询者的使用场景

dapiqq

楼主应该是给一个方法或例子，具体应用或产品还是要看各位小伙伴自己的。

zdx0122

wakawaka1024 发表于 2024-10-30 15:28
大佬，想问下这个产品有啥应用呢，感觉现在截图软件也都很方便

是国外有一个类似的产品，其客户是有大量截图很多网页的场景

zdx0122

abozhu 发表于 2024-10-30 15:33
大佬这个要怎么使用呢？浏览器插件还是本机运行的小程序？

是服务端运行的程序，用Java的SpringBoot写的web服务