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

Question

我想做一个 JS function 可以从元素中截取屏幕截图然后下载。

 <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 格式下载。

Answer 1

使用html2canvas可以帮助您，它将元素转换为 canvas，然后您只需将其数据作为 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

Answer 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>

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

问题描述

2 个解决方案

解决方案1
0 2021-06-05 14:54:20

解决方案2
0 2021-06-05 15:33:24

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

问题描述

2 个解决方案

解决方案1 0 2021-06-05 14:54:20

解决方案2 0 2021-06-05 15:33:24

解决方案1
0 2021-06-05 14:54:20

解决方案2
0 2021-06-05 15:33:24