下载JavaScript返回的图片（html2canvas）

Question

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

不幸的是，只有错误的png文件被下载，其大小约为140kb。 Windows无法打开它（例如，绘画或预览）。

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

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();
        }
    });
}

尝试下载返回的png文件的Java代码：

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();
}

完整的HTML页面：

<!DOCTYPE html>
<html>
    <head>
    <style>
    html, body, #div {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px
    }
    </style>
    <script src="html2canvas.js"></script>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

    </head>
    <body>
    <div id="div"></div>
        <script>
            // Some init stuff for div and after completion the following:
            saveMap();

        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();
                }
            });
        }
        </script>
    </body>
</html>

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图像替换当前窗口的内容。 Andd您必须在代码中处理这个问题。 由于存在替换，因此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 个解决方案

解决方案1
0 2017-09-27 17:14:23

解决方案2
0 2017-10-15 09:04:24

下载JavaScript返回的图片（html2canvas）

问题描述

2 个解决方案

解决方案1 0 2017-09-27 17:14:23

解决方案2 0 2017-10-15 09:04:24

解决方案1
0 2017-09-27 17:14:23

解决方案2
0 2017-10-15 09:04:24