如何使用 JS 截图 iframe？

最新推荐文章于 2024-10-08 15:31:55 发布

gmzd2008

最新推荐文章于 2024-10-08 15:31:55 发布

阅读量1.2k

点赞数 6

文章标签： html5 javascript

本文链接：https://blog.csdn.net/qq_31813401/article/details/136574491

版权

在编写网页时，我们经常会使用 iframe 元素来嵌入其他网页。但是，如果我们想要对嵌入的网页进行截图，就会遇到一些问题。本文将介绍如何使用 JavaScript 对 iframe 进行截图，并给出了相关示例代码。

首先，我们需要在页面中引入两个 JavaScript 库：html2canvas 和 jQuery。其中，html2canvas 是一个用于将网页内容转换为 canvas 元素的库，而 jQuery 则是一个常用的 JavaScript 库，用于简化 DOM 操作。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style>
    .demo {
      display: flex;
    }

    .html-content {
      width: 400px;
      height: 300px;
      background: #000;
      position: relative;
      font-size: 20px;
    }

    h1 {
      color: #666;
    }

    p {
      color: #fff;
    }

    #btn {
      margin: 20px;
    }

    .result {
      min-width: 500px;
      min-height: 300px;
      background: #ccc;
      position: relative;
      font-size: 20px;
    }
    .result > canvas {
      margin: 10px;
    }
  </style>
</head>

<body>
  <!-- <iframe src="http://www.likuso.com/city21/2422152.html" id="iframe"></iframe> -->
  <div class="demo">
    <div class="html-content">
      <div class="content">
        <h1>截图区域</h1>
        <p>文本内容</p>
        <!-- 图片内容 -->
        <img src="http://www.jq22.com/img/logo.png" width="60%" style="padding-top:10px" alt="jQuery插件">
      </div>
    </div>

    <div>
      <button id="btn">截图</button>
    </div>

    <!-- 结果存储区域 -->
    <div class="result"></div>
  </div>
  <div>
    <p>1> 截取 iframe 失败，跨域原因, 无法解决iframe 引入的网站需要外部容器跨越获取内容</p>
    <p>2> 截取自己网页内容 部分成功，原因是加载了外部图片，也是跨域了</p>
    <p>参考网站：https://cloud.tencent.com/developer/article/1768053?from=information.detail.js</p>
  </div>


  <script>
    function download(base64) {
      var date = new Date();
      if (!base64) {
        return;
      }
      var aLink = document.createElement("a"); // 创建一个a标签
      var blob = base64ToBlob(base64);
      var event = document.createEvent("HTMLEvents");
      event.initEvent("click", true, true);
      aLink.download = date.getTime() + "." + blob.type.split("/")[1]; // 使用时间戳给文件命名
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    }
    // base64转Blob对象
    function base64ToBlob(code) {
      var parts = code.split(";base64,");
      var contentType = parts[0].split(":")[1];
      var raw = window.atob(parts[1]);
      var rawLength = raw.length;
      var uint8Array = new Uint8Array(rawLength);
      for (var i = 0; i < rawLength; i++) {
        uint8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uint8Array], { type: contentType });
    }
    // 点击按钮
    document.getElementById('btn').onclick = function () {
      // const dom = document.querySelector('#iframe')
      const dom = document.querySelector('.html-content')
      html2canvas(dom, {
        onrendered: function (canvas) {
          var img = canvas.toDataURL('image/png');
          console.log(img);
          // download(img) // 下载

          document.querySelector('.result').appendChild(canvas);
        }
      });
    }
  </script>
</body>

</html>

在上述示例代码中，我们通过注释掉的 iframe 元素展示了两种情况下的问题。首先，如果 iframe 的 src 属性指向了外部网页，由于跨域原因，我们无法对其进行截图。其次，即使是对自己的网页进行截图，如果加载了外部图片，同样会因为跨域问题而导致部分截图失败。

为了解决这个问题，我们使用了 html2canvas 库来将指定元素的内容转换为 canvas 元素。在上述代码中，我们通过选择器获取了一个具有特定类名的元素，并将其传递给 html2canvas 函数。在函数的回调函数中，我们将生成的 canvas 元素添加到了指定的存储区域中，并在控制台上打印了 base64 格式的图片数据。

如果你想要将截图下载到本地，可以调用 download 函数，并将 base64 数据传递给它。该函数会创建一个 a 标签，并使用 URL.createObjectURL 方法将 canvas 转换为一个可下载的 Blob 对象。

总结：

本文介绍了如何使用 JavaScript 对 iframe 进行截图。尽管在跨域情况下无法对 iframe 进行截图，但我们可以使用 html2canvas 库对自己的网页内容进行截图。同时，我们也解决了加载外部图片导致截图部分失败的问题。希望本文对你有所帮助！