当前位置：首页 > news >正文

前端实现页面截图 -- html2canvas

news 2025/7/3 15:54:28

方案：

canvas
puppeteer （无头浏览器）
html2canvas

使用html2canvas实现：

考虑：1. 截图区域：全页面截图，局部截图、特定区域截图
2. 函数式、组件式

实现代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>页面截图</title>
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.3.2/dist/html2canvas.min.js"></script>
  </head>
  <body>
    <h1>页面截图示例</h1>
    <p>这是一个简单的页面截图示例。</p>
    <button id="captureBtn" onclick="capturePage()">截图</button>

    <script>
      function html2canvasToImage(dom) {
        // 使用html2canvas将页面转换为canvas
        html2canvas(dom).then((canvas) => {
          // 创建一个链接元素
          const link = document.createElement("a");
          link.href = canvas.toDataURL(); // 将canvas转换为图片URL
          link.download = "screenshot.png"; // 设置下载文件名
          link.click(); // 模拟点击链接下载图片
        });
      }

      function capturePage() {
        // 截取整个页面
        let dom = document.body;
        html2canvasToImage(dom);
      }
    </script>
  </body>
</html>