gpt4 book ai didi

javascript - html2canvas无法下载

转载 作者:行者123 更新时间:2023-12-03 01:33:51 27 4
gpt4 key购买 nike

我下面的代码包含一个简单的 hello world html 页面,我正在尝试使用库 html2canvas 来尝试下载 Canvas ,但它没有似乎正在工作,我正在遵循我看到的教程,但它不起作用,我在下面做错了什么吗?任何帮助将不胜感激。

function sendData() {
html2canvas(document.getElementById('capture')).then(function (canvas) {
$('#capture').append(canvas);
$('#match-button').attr('href', canvas.toDataURL('image/png'));
$('#match-button').attr('download', 'Test.png');
$('#match-button')[0].click();
});
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="//#" />
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>

<body>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Helloo world!</h4>
</div>
<div id="match-button" onclick="sendData();">capture</div>



</body>
</html>

最佳答案

首先。如果 test 是某个元素的 id,则 jQuery 语法需要在其前面添加 #

$('#test')

然后,html2canvas onrendered 选项已弃用。使用 then() 方法,如官方网站 https://html2canvas.hertzen.com/ 上所述。 。我在问题的 html 代码片段中找不到 test 元素,因此我将其添加到匹配按钮之后。修改后的代码如下所示:

<script>
function sendData() {
html2canvas(document.getElementById('capture')).then(function (canvas) {
$('#capture').append(canvas);
$('#test').attr('href', canvas.toDataURL('image/png'));
$('#test').attr('download', 'Test.png');
$('#test')[0].click();
});
}
</script>
...
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Helloo world!</h4>
</div>
<div id="match-button" onclick="sendData();">capture</div>
<a id="test" href="#"></a>

关于javascript - html2canvas无法下载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51167735/

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