下載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