Question

我尝试从WebPage下载图像，该图像在调用后立即由JavaScript（使用html2canvas）返回。因此，我使用的是HTMLUnit库，但直到现在我还没有成功。

不幸的是，只下载了一个有问题的png-File，大约有140kb。它无法通过Windows打开（例如绘画或预览）。

我的HTML页面的代码片段（在div元素#div加载后立即执行：

If

Java-Code试图下载返回的png-File：

function saveMap() {
    var element = $("#div");

    html2canvas(element, {
        useCORS: true,
        onrendered: function(canvas) {
            var dataUrl= canvas.toDataURL("image/png");

            var a = $("<a>")
                .attr("href", dataUrl)
                .attr("download", "test.png")
                .appendTo("body");

            a[0].click();

            a.remove();
        }
    });
}

完整的HTML-Page：

WebClient webClient = new WebClient(BrowserVersion.CHROME);

try {
    HtmlPage page1 = webClient.getPage( new URI("file:///D:/path/to/page/sample.html").toURL() );
    webClient.waitForBackgroundJavaScript(5000);


    InputStream is = page1.getWebResponse().getContentAsStream();

    File f = new File("test.png");
    OutputStream os = new FileOutputStream(f);
    byte[] bytes = new byte[2048];

    int b = 0;

    while ((b = is.read()) != -1)
    {
        os.write(bytes, 0, b);
    }

    os.close();
    is.close();
} catch (FailingHttpStatusCodeException | IOException | URISyntaxException e) {
    e.printStackTrace();
}

Answer 1

感谢您的代码。已经使用html2canvas网页上提供的示例进行了一些测试。当前版本的HtmlUnit中存在阻止javascript工作的错误。我想我也做了一个修复，但是sourceforge现在已经失败了。如果他们回来了，我将提交修复并准备一个新的快照。将通知您，并查看您的样品。

顺便说一句：不要指望这个很好的截图。 HtmlUnit是一个无头浏览器，大多数布局功能只执行基本工作。但欢迎您提供更好的实施。

Answer 2

您的代码与最新快照一起工作（带有一些修复）。但要获得合理的结果，您必须为结果提供宽度和高度。我猜HtmlUnit中有一些布局，否则返回1x1作为结果大小。如果这是一个问题，你可以查看代码并尝试指出有问题的地方。

        html2canvas(element, {
            useCORS: true,
            width: 300,
            height: 300,
            onrendered: function(canvas) {

现在到你的java代码

HtmlPage page1 = webClient.getPage( new URI("file:///D:/path/to/page/sample.html").toURL() );
webClient.waitForBackgroundJavaScript(5000);

这里棘手的部分是浏览器内渲染的异步执行。从HtmlUnit的角度来看，浏览器将在加载页面完成后，用png图像替换当前窗口的内容。你必须在你的代码中处理这个问题。因为有一个替换你的page1仍然是旧页面返回（同步）。等待之后，您必须重新获取当前内容才能掌握png

        Page image = webClient.getCurrentWindow().getEnclosedPage();
        InputStream is = image.getWebResponse().getContentAsStream();

最后，您的图像编写代码存在一个小问题而不是

while ((b = is.read()) != -1)

你必须写

while ((b = is.read(bytes)) != -1)

否则，您将得到一个空字节文件。

希望有所帮助。

下载JavaScript返回的图像（html2canvas）

2 个答案: