如何使用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.