gpt4 book ai didi

javascript - 下载 JavaScript 返回的图像 (html2canvas)

转载 作者:太空宇宙 更新时间:2023-11-04 11:06:22 24 4
gpt4 key购买 nike

我正在尝试从网页下载图像,该图像由 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();
}
});
}

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

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>

最佳答案

感谢您的代码。已经使用 html2canvas 网页上提供的示例进行了一些测试。当前版本的 HtmlUnit 中存在错误,导致 javascript 无法工作。我想我也已经修复了,但是 sourceforge 目前已经关闭。如果他们回来了,我将提交修复并准备新的快照。我们会通知您并查看您的样本。

顺便说一句:不要指望从中得到漂亮的屏幕截图。 HtmlUnit 是一个 headless 浏览器,大多数布局功能只做基本的工作。但欢迎您提供更好的实现。

关于javascript - 下载 JavaScript 返回的图像 (html2canvas),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46438363/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com