HTML2Canvas 不渲染完整的 div，仅渲染屏幕上可见的内容

屏幕

使用HTML2Canvas库可以将HTML页面中的内容转换为图像。通常情况下，HTML2Canvas会渲染整个页面的内容，但是有时候我们只希望渲染屏幕上可见的部分。本文将介绍如何使用HTML2Canvas来实现这一目标，并提供相应的案例代码。

在开始之前，我们首先需要引入HTML2Canvas库。可以通过在HTML文件中添加以下代码来实现：

html
<script src="https://cdnJS.cloudflare.com/Ajax/libs/html2canvas/0.4.1/html2canvas.min.JS"></script>

接下来，我们需要为需要渲染的div元素添加一个id属性，以便于后续的选择和操作。例如，我们可以给一个div元素添加id属性如下：

html
<div id="myDiv">
  <!-- div的内容 -->
</div>

现在，我们可以使用JavaScript来实现只渲染屏幕上可见部分的功能。首先，我们需要获取屏幕的可见高度和宽度。可以通过以下代码来获取：

Javascript
var screenHeight = window.innerHeight;
var screenWidth = window.innerWidth;

接下来，我们需要使用HTML2Canvas来渲染div元素。我们可以使用html2canvas函数来实现。具体的代码如下：

Javascript
html2canvas(document.getElementById("myDiv"), {
  height: screenHeight,
  width: screenWidth,
}).then(function(canvas) {
  // 渲染完成后的操作
});

在上述代码中，我们将height和width属性分别设置为屏幕的可见高度和宽度，从而只渲染屏幕上可见的部分。

当渲染完成后，我们可以在then函数中进行一些操作，比如将渲染结果显示在页面上或者保存为图片。下面是一个保存渲染结果为图片的示例代码：

Javascript
html2canvas(document.getElementById("myDiv"), {
  height: screenHeight,
  width: screenWidth,
}).then(function(canvas) {
  var link = document.createElement('a');
  link.href = canvas.toDataURL();
  link.download = 'myDiv.png';
  link.click();
});

在上述代码中，我们创建了一个<a>元素，并将渲染结果的DataURL赋值给href属性，然后设置download属性为要保存的文件名，最后模拟点击这个链接来触发下载操作。

案例代码：

下面是一个完整的示例代码，演示了如何使用HTML2Canvas只渲染屏幕上可见的内容并保存为图片：

html
<!DOCTYPE html>
<html>
<head>
  <title>HTML2Canvas Demo</title>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/html2canvas/0.4.1/html2canvas.min.JS"></script>
</head>
<body>
  <div id="myDiv" style="height: 2000px; width: 2000px;">
    <!-- div的内容 -->
  </div>
  <script>
    var screenHeight = window.innerHeight;
    var screenWidth = window.innerWidth;
    html2canvas(document.getElementById("myDiv"), {
      height: screenHeight,
      width: screenWidth,
    }).then(function(canvas) {
      var link = document.createElement('a');
      link.href = canvas.toDataURL();
      link.download = 'myDiv.png';
      link.click();
    });
  </script>
</body>
</html>

：

通过使用HTML2Canvas库，我们可以方便地将HTML页面的内容转换为图像。本文介绍了如何使用HTML2Canvas只渲染屏幕上可见的内容，并提供了相应的案例代码。通过这种方法，我们可以更加灵活地控制渲染的范围，以满足不同的需求。希望本文对你有所帮助！