前端实现页面截图 -- html2canvas

最新推荐文章于 2025-04-23 17:03:07 发布

浮桥

最新推荐文章于 2025-04-23 17:03:07 发布

阅读量705

点赞数 19

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/weixin_44801790/article/details/146311841

方案：

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>