我有下面的代码，其中包括一个HTML tab和一个按钮，打开我的模态.问题是，我正在使用库HTML2canvas，我试图捕捉my HTML tab与模态下面，我已经把我的模态代码在我的capture div，但它没有出现在图片中，当我下载它.
我正在做的事情是否有可能完成？任何帮助都将不胜感激，谢谢。
function sendData() {
html2canvas(document.getElementById('capture'), {
allowTaint: false,
useCORS: true
}).then(function(canvas) {
$('#test').attr('href', canvas.toDataURL('image/png'));
$('#test').attr('download', 'Test.png');
$('#test')[0].click();
});
}
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();body {
font-family: Arial;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
margin-top: 10px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
border-bottom: 8px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 25px;
border: 1px solid #ccc;
border-top: none;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
background-color: white;
}
.jobs-panel {
display: table;
max-height: 100%;
width: 85%;
background-color: #b7bcbe;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
margin-bottom: 25px;
padding-bottom: 20px;
padding-top: 20px;
}
.tabwidth {
width: 85%;
margin: 0 auto;
}<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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">
<div class="jobs-panel">
<button class="modal-button" data-toggle="modal" data-target="#myModal2">MODAL BUTTON</button>
<div class="tabwidth">
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Pikachu')" id="defaultOpen">Pikachu</button>
</div>
<div id="Pikachu" class="tabcontent">
<img src="https://s22.postimg.cc/l2txqenox/Pikachu.png" width="300" height="300" crossorigin>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
</div>
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title center">FAQ</h2>
</div>
<div class="modal-body">
<div class="central">
<h3 class="bold-text ">QUESTIONS
</h3>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<button id="match-button" onclick="sendData();">capture</button>
<a id="test" href="#"></a>
</body>
</html>
2条答案
按热度按时间h5qlskok1#
我正在添加一个帮助函数，以这种方式下载图像：
下面是我找到downloadCanvas函数代码的链接：
https://jsfiddle.net/AbdiasSoftware/7PRNN/
你好，希望能有所帮助。
ma8fv8wu2#
使用，
而不是捕捉组件的图像。在react中工作良好。