截取元素（jpg，png）的屏幕截图，然后下载。 Javascript答案

【问题标题】：Take screenshot of element (jpg,png) and then download it. Javascript截取元素（jpg，png）的屏幕截图，然后下载。 Javascript
【发布时间】：2021-06-05 23:33:24
【问题描述】：

我想做一个JS函数，可以从元素中截屏然后下载。

<body>
    <h1>Sample text</h1>
    <h2>Sample text</h2>
    <table width="1080px" height="1920px" border="1" style="border-collapse:collapse">
        <tbody><tr>
            <td colspan="2">
                <img src="https://inspectiondoc.com/wp-content/uploads/2014/08/sample-icon.png" width="600px">
            </td>
            <td>
                Sample text
            </td>
        </tr>
        <tr style="background:#b6ff00">
            <td>
                Sample text
            </td>
            <td>
                Sample text
            </td>
            <td>
                Sample text
            </td>
        </tr>
    </tbody></table>
    <h1>
        sample text
    </h1>
    <h2>Sample text</h2>
    <br><br>
    <input type="button" value="Capture" onclick="capture()">

</body>

点击捕获按钮后，我希望这个 td colspan="2" 元素被截屏并以 jpg 或 png 格式下载。

【问题讨论】：

这能回答你的问题吗？ Using HTML5/Canvas/JavaScript to take in-browser screenshots
不完全，但谢谢

标签： javascript

【解决方案1】：

使用html2canvas 可以帮助您，它将元素转换为画布，然后您只需将其数据作为 url 添加到 a 元素中

function download(canvas, filename) {
  const data = canvas.toDataURL("image/png;base64");
  const donwloadLink = document.querySelector("#download");
  donwloadLink.download = filename;
  donwloadLink.href = data;
}

html2canvas(document.querySelector(".card")).then((canvas) => {
  // document.body.appendChild(canvas);
  download(canvas, "asd");
});

在此处查看完整示例https://codepen.io/koseare/pen/NWpMjeP

【讨论】：

【解决方案2】：

试试html2canvas;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="all">
      <h2>Sample text</h2>
      <table width="1080px" height="1920px" style="border-collapse: collapse">
        <tbody>
          <tr>
            <td colspan="2">
              <img
                src="https://inspectiondoc.com/wp-content/uploads/2014/08/sample-icon.png"
                width="600px"
              />
            </td>
            <td>Sample text</td>
          </tr>
          <tr style="background: #b6ff00">
            <td>Sample text</td>
            <td>Sample text</td>
            <td>Sample text</td>
          </tr>
        </tbody>
      </table>
    </div>
    <br />
    <input type="button" id="btn" value="Download" />
    <script>
      
      document.getElementById("btn").addEventListener(
        "click",
        function () {
          var text = document.getElementById("all").value;
          var filename = "output.txt";
          download(filename, function makeScreenshot() {
        html2canvas(document.getElementById("screenshot"), {scale: 1}).then(canvas => {
            document.body.appendChild(canvas);
        });
    });
        },
        false
      );
    </script>
  </body>
</html>

【讨论】：