How to capture multiple Canvas with html2canvas
Question
I have this code below with 3 divs i'm using the library html2canvas to capture and download the yellow div but what i'm trying to accomplish is to try and capture the yellow and black div into one picture and download it. I have no idea if its possible to do accomplish it but any help would be greatly appreciated thanks.
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 answers
solution1
4 ACCPTED 2018-07-04 10:42:52
This library that you are using does not accept more than one DOM element. So, to achieve the result you want, you must wrap the two div's with a parent that will have the id #capture as the example:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.