如何使用html2canvas捕获多个Canvas
[英]How to capture multiple Canvas with html2canvas
问题描述
我在下面的代码中包含3个div，我正在使用html2canvas库捕获并下载yellow div但是我要完成的工作是尝试将yellow and black div捕获为一张图片并下载。 我不知道是否有可能做到这一点，但任何帮助将不胜感激，谢谢。
function sendData() { html2canvas(document.getElementById('capture')).then(function(canvas) { $('#test').attr('href', canvas.toDataURL('image/png')); $('#test').attr('download', 'Test.png'); $('#test')[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 style="padding: 10px; background: pink"> <h4 style="color: #000; ">Helloo world!</h4> </div> <div style="padding: 10px; background: black"> <h4 style="color: white; ">Helloo world!</h4> </div> <div id="match-button" onclick="sendData();">capture</div> <a id="test" href="#"></a> </body> </html>
1 个解决方案
解决方案1
4 已采纳 2018-07-04 10:42:52
您正在使用的该库不接受多个DOM元素。 因此，要获得所需的结果，必须将两个div包裹在一个父实例上，该父实例将具有ID #capture作为示例：
<div id="capture">
<div style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Helloo world!</h4>
</div>
<div style="padding: 10px; background: black">
<h4 style="color: white; ">Helloo world!</h4>
</div>
</div>
HTML2Canvas-如何捕获所有div？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.