浅析js实现网页截图的两种方式

在网页开发过程中，有时需要实现对网页进行截图的功能。本文将详细介绍js实现网页截图的两种方式，供大家参考。

方式一：html2canvas

html2canvas是一个开源的js库，可以将整个网页转化成canvas元素。使用它，我们可以将网页的部分或全部内容保存下来，以实现网页截图的效果。

安装和使用：

使用npm安装 npm install html2canvas
直接引用js文件 https://html2canvas.hertzen.com/dist/html2canvas.min.js

示例：

<!DOCTYPE html>
<html>
<head>
  <title>html2canvas demo</title> 
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
  <h1>这里是网页头部</h1>
  <p>这里是网页内容</p>
  <button id="save-btn">保存截图</button>

  <script type="text/javascript">
    document.getElementById("save-btn").addEventListener("click", function() {
      html2canvas(document.body).then(function(canvas) {
        document.body.appendChild(canvas);
      });
      console.log("截图保存成功！");
    });
  </script>
</body>
</html>

上述示例代码使用了 html2canvas 库来实现对网页全屏进行截图，并将截图显示在页面中。可以通过按钮点击事件触发网页截图的保存，截图成功后打印提示信息。

方式二：canvas截图

另外一种方式是使用原生js，采用canvas截图的方式对网页进行截图。这种方式需要熟悉canvas元素的相关api。基本思路是根据canvas元素的尺寸将网页中的内容进行裁剪，然后将裁剪后的内容转化为图像形式进行保存。

示例：

<!DOCTYPE html>
<html>
<head>
  <title>canvas截图 demo</title> 
</head>
<body>
  <h1>这里是网页头部</h1>
  <p>这里是网页内容</p>
  <button id="save-btn">保存截图</button>
  <canvas id="canvas-img" width="500" height="500"></canvas>

  <script type="text/javascript">
    document.getElementById("save-btn").addEventListener("click", function() {
      var c = document.getElementById("canvas-img");
      var ctx = c.getContext("2d");
      ctx.fillRect(0, 0, c.width, c.height);
      ctx.drawImage(document.body, 0, 0, c.width, c.height, 0, 0, c.width, c.height);

      var imgData = c.toDataURL();
      console.log(imgData);
      console.log("截图保存成功！");
    });
  </script>
</body>
</html>

上述例子使用原生js实现了网页截图的功能。通过对canvas元素进行相关api操作，将网页内容裁剪并转化为图像。最后通过 toDataURL() 方法将图像保存下来，可以通过控制台查看保存的图像地址。