Html2Canvas无法捕获图像
[英]Html2Canvas Unable to capture image
问题描述
我在下面的代码中包含一个带有图像的选项卡，并且我正在使用HTML2Canvas库捕获整个div并下载它，但是我不确定为什么它不捕获图像。
我尝试添加配置选项allowTaint:true但它仍然不断给我这个错误DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 我不确定为什么这种情况持续发生，但是任何帮助将不胜感激，谢谢。
function sendData() { html2canvas(document.getElementById('capture')).then(function(canvas) { $('#test').append(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> <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"> <h1>Hello My man</h1> <div class="jobs-panel"> <p>In this example, we use JavaScript to "click" on the London button, to open the tab on page load.</p> <div class="tabwidth"> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <img src="https://cdn.bulbagarden.net/upload/thumb/4/49/Ash_Pikachu.png/250px-Ash_Pikachu.png" width="300" height="300"> <p>London is the capital city of England.</p> </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> <div id="match-button" onclick="sendData();">capture</div> <a id="test" href="#"></a> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2018-07-06 12:09:50
更改
<img src="https://cdn.bulbagarden.net/upload/thumb/4/49/Ash_Pikachu.png/250px-Ash_Pikachu.png" width="300" height="300">
至
<img src="https://cdn.bulbagarden.net/upload/thumb/4/49/Ash_Pikachu.png/250px-Ash_Pikachu.png" width="300" height="300" crossorigin>
并在您的js allowTaint: false;
会很好用的，
更新jsfiddel-> http://jsfiddle.net/qp4b8frw/14/
使用 html2canvas 将 div 捕获到图像中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.