html2canvas无法下载

Question

我下面的代码包含一个简单的hello world html页面，我正在尝试使用html2canvas库尝试下载画布，但是它似乎无法正常工作，我正在遵循所看到的教程，但没有我在下面做错事吗？ 任何帮助将不胜感激。

 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>

Answer 1

首先。 如果test是某个元素的ID，则jQuery语法在其之前需要＃。

$('#test')

然后，不推荐使用html2canvas onrendered选项。 改用then（）方法，如官方网站https://html2canvas.hertzen.com/所述。 我无法从问题中的html代码段中找到测试元素，因此我在match-button之后添加了它。 修改后的代码如下所示：

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

html2canvas无法下载

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-07-04 07:43:28

html2canvas无法下载

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-07-04 07:43:28

解决方案1
1 已采纳 2018-07-04 07:43:28