问html2canvas无法下载
EN

Stack Overflow用户

提问于 2018-07-04 07:08:05

回答 1查看 1.2K关注 0票数 0

下面的代码包含一个简单的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>

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-04 07:43:28

首先。如果test是某个元素的id，则jQuery语法在它之前需要#。

$('#test')

然后，不建议使用html2canvas on呈现选项。使用然后()方法代替官方站点https://html2canvas.hertzen.com/上描述的方法。我在问题的html片段中找不到测试元素，所以我在match按钮之后添加了它。修改后的代码如下所示：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51167735

复制

相似问题

问html2canvas无法下载
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html2canvas无法下载EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html2canvas无法下载
EN