[英]html2canvas unable to download
I have this code below that contains a simple hello world
html page i'm trying to use the library html2canvas
to try to download the canvas but it doesn't seem to be working i'm following a tutorial i saw but it doesn't work am i doing something wrong below? 我下面的代码包含一个简单的
hello world
html页面,我正在尝试使用html2canvas
库尝试下载画布,但是它似乎无法正常工作,我正在遵循所看到的教程,但没有我在下面做错事吗? Any help would be greatly appreciated. 任何帮助将不胜感激。
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>
First of all. 首先。 If test is an id of some element, jQuery syntax requires # before it.
如果test是某个元素的ID,则jQuery语法在其之前需要# 。
$('#test')
Then, html2canvas onrendered option is deprecated. 然后,不推荐使用html2canvas onrendered选项。 Use then() method instead as described on the official site https://html2canvas.hertzen.com/ .
改用then()方法,如官方网站https://html2canvas.hertzen.com/所述 。 I could not find test element in html snippet from the question, so I added it after the match-button.
我无法从问题中的html代码段中找到测试元素,因此我在match-button之后添加了它。 The modified code looks like this:
修改后的代码如下所示:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.