Question

我下面的代码包含3个单独的div，我目前能够捕获并下载png图像中的黄色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>

JavaScript屏幕捕获单独的DOM元素

0 个答案: