HTML2Canvas 捕获模态
[英]HTML2Canvas capture modal
问题描述
我在下面有这段代码，它由一个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 个解决方案
解决方案1
2 已采纳 2018-07-19 06:25:40
我正在添加一个 helper function 以这种方式下载图像：
`https://codepen.io/anon/pen/PBGaMP`
这是我找到 downloadCanvas function 代码的链接：
https://jsfiddle.net/AbdiasSoftware/7PRNN/
问候，希望它有所帮助。
解决方案2
0 2023-01-04 06:58:14
采用，
import { useScreenshot } from 'use-react-screenshot'
而不是捕获组件的图像。 在反应中工作正常。
如何使用html2canvas捕获多个Canvas
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.