如何提取HTML页面canvas图像并在JavaFX画布中加载展示

• 选择器配置错误：目标图表容器的chart_div是class属性，原代码使用ID选择器#chart_div无法匹配到对应DOM节点
• 未等待动态渲染完成：页面图表由JS异步绘制到canvas元素上，原逻辑未等canvas渲染完成就触发截图，会拿到空白或未加载完成的内容

调整选择器为类选择器，增加渲染等待配置，支持直接返回内存字节流无需落盘保存文件：

public void PlotAction(ActionEvent e) throws Exception
{
    GrabzItClient grabzIt = new GrabzItClient("你的实际Application Key", "你的实际Application Secret");
    ImageOptions options = new ImageOptions();
    options.setBrowserWidth(770);
    options.setBrowserHeight(263);
    options.setFormat(ImageFormat.PNG);
    // 修正选择器为类选择器匹配目标容器
    options.setTargetElement(".chart_div");
    // 增加2秒等待时间，预留canvas渲染时长
    options.setDelay(2000);
    // 显式等待canvas元素加载完成
    options.setWaitForElement(".chart_div canvas");
    
    grabzIt.URLToImage("https://in-the-sky.org/data/object.php?id=A216", options);
    // 直接获取图片字节数组，不需要保存到本地文件
    byte[] imgBytes = grabzIt.SaveTo();
    // 字节数组可直接转成JavaFX Image对象用于画布绘制
}

第三方截图服务存在配额、网络依赖问题，可使用Java版无头浏览器工具直接注入JS提取canvas导出的图片数据，不存在截图偏移、等待不足的问题，拿到的图片和页面渲染效果完全一致。
核心实现逻辑：

1. 无头浏览器加载目标页面
2. 等待canvas元素渲染完成
3. 执行JS调用canvas原生的toDataURL方法拿到图片base64数据
4. 解码base64为字节数组，直接转成JavaFX可识别的Image对象，全程无磁盘IO

// 以Playwright for Java为例的实现代码
public Image getRenderedChartImage() {
    try (Playwright playwright = Playwright.create()) {
        Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(true));
        Page page = browser.newPage();
        page.navigate("https://in-the-sky.org/data/object.php?id=A216");
        // 等待目标canvas加载
        page.waitForSelector(".chart_div canvas");
        // 注入JS提取canvas图片数据
        String imgBase64 = (String) page.evaluate("() => {\n" +
                "  const canvas = document.querySelector('.chart_div canvas');\n" +
                "  return canvas.toDataURL('image/png').split(',')[1];\n" +
                "}");
        byte[] imgBytes = Base64.getDecoder().decode(imgBase64);
        browser.close();
        return new Image(new ByteArrayInputStream(imgBytes));
    }
}

// 将提取到的图片绘制到JavaFX Canvas
public void drawToJavaFxCanvas(Canvas targetCanvas, Image chartImage) {
    GraphicsContext gc = targetCanvas.getGraphicsContext2D();
    gc.clearRect(0, 0, targetCanvas.getWidth(), targetCanvas.getHeight());
    gc.drawImage(chartImage, 0, 0, targetCanvas.getWidth(), targetCanvas.getHeight());
}

如果不想引入第三方工具依赖，可直接使用JavaFX原生自带的WebView组件加载页面提取数据，完全在JavaFX技术栈内完成需求：

import javafx.concurrent.Worker;
import javafx.application.Platform;

public CompletableFuture<Image> loadChartWithNativeWebView() {
    CompletableFuture<Image> resultFuture = new CompletableFuture<>();
    WebView webView = new WebView();
    webView.getEngine().getLoadWorker().stateProperty().addListener((observable, oldState, newState) -> {
        if (newState == Worker.State.SUCCEEDED) {
            // 延迟等待canvas渲染完成
            new Thread(() -> {
                try {
                    Thread.sleep(1200);
                    String base64Data = (String) webView.getEngine().executeScript(
                            "document.querySelector('.chart_div canvas').toDataURL('image/png').split(',')[1]"
                    );
                    byte[] imgBytes = Base64.getDecoder().decode(base64Data);
                    resultFuture.complete(new Image(new ByteArrayInputStream(imgBytes)));
                } catch (Exception e) {
                    resultFuture.completeExceptionally(e);
                }
            }).start();
        }
    });
    webView.getEngine().load("https://in-the-sky.org/data/object.php?id=A216");
    return resultFuture;
}

// 调用示例
loadChartWithNativeWebView().thenAccept(chartImg -> {
    Platform.runLater(() -> {
        Canvas displayCanvas = new Canvas(770, 263);
        drawToJavaFxCanvas(displayCanvas, chartImg);
        // 将displayCanvas挂载到你的场景布局中即可展示
    });
});

• 网络环境较差时可适当调大渲染等待时长，避免拿到未绘制完成的canvas
• 若目标站点有反爬限制，可给浏览器配置真实请求头、关闭无头模式特征标识绕过检测
• 无需本地保存文件的场景下，全程使用内存流传递图片数据即可，无额外磁盘IO开销

内容的提问来源于stack exchange，提问作者Siwoo Park