前端实现页面截图 -- html2canvas

方案:

  1. canvas
  2. puppeteer (无头浏览器)
  3. 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/[email protected]/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>

你可能感兴趣的:(前端)