html2canvas生成的图片偏移不完整的解决方法

下面是详细讲解“html2canvas生成的图片偏移不完整的解决方法”的完整攻略：

问题描述

在使用html2canvas进行网页截图时，有时会出现截图偏移、不完整的情况，这个问题通常是由于网页中存在定位、层叠、溢出等样式导致的。

解决方法

一、增加canvas的width和height

html2canvas截图时，会将整个网页转化为一张canvas图片。当网页中存在绝对定位、浮动、层叠等样式时，一些元素会因为超出“画布”的范围而无法截取，导致最终的截图偏移不完整。

这个问题可以通过增加canvas的width和height属性来解决。具体做法是，在调用html2canvas时，增加一个canvas元素，并将其width和height属性设置为网页宽度和高度的两倍，然后将canvas元素传入html2canvas的target选项中，这样就能够完整地截取网页了。

const scale = 2; // 设置缩放比例
const canvas = document.createElement('canvas');
canvas.width = document.documentElement.clientWidth * scale;
canvas.height = document.documentElement.clientHeight * scale;
const options = {
  scale: scale,
  canvas: canvas,
  logging: false,
  useCORS: true,
  allowTaint: false,
  backgroundColor: null,
  foreignObjectRendering: false
};
html2canvas(document.documentElement, options).then(function (canvas) {
  // ...
});

二、调整html2canvas截图区域

如果增加canvas的width和height属性仍然无法解决截图偏移不完整的问题，可以尝试调整截图区域。具体做法也比较简单，就是通过给html2canvas的windowWidth和windowHeight选项赋值来调整截图区域的大小。

const canvas = document.createElement('canvas');
const options = {
  canvas: canvas,
  logging: false,
  useCORS: true,
  allowTaint: false,
  backgroundColor: null,
  foreignObjectRendering: false,
  windowWidth: document.documentElement.scrollWidth,
  windowHeight: document.documentElement.scrollHeight
};
html2canvas(document.documentElement, options).then(function (canvas) {
  // ...
});

示例说明

下面提供两个示例来说明如何解决html2canvas生成的图片偏移不完整的问题：

示例一

假设我们有一个网页中包含一个悬浮在网页右边的菜单条，当我们使用html2canvas进行截图时，菜单条经常会偏移不完整。为了解决这个问题，我们可以通过增加canvas的width和height属性来达到完整截图的效果。

<style>
  .menu {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.2);
  }
</style>
<div class="menu"></div>

const scale = 2; // 设置缩放比例
const canvas = document.createElement('canvas');
canvas.width = document.documentElement.clientWidth * scale;
canvas.height = document.documentElement.clientHeight * scale;
const options = {
  scale: scale,
  canvas: canvas,
  logging: false,
  useCORS: true,
  allowTaint: false,
  backgroundColor: null,
  foreignObjectRendering: false
};
html2canvas(document.documentElement, options).then(function (canvas) {
  // ...
});

示例二

假设我们有一个网页中包含一个绝对定位的模态窗口，当我们使用html2canvas进行截图时，模态窗口经常会偏移不完整。为了解决这个问题，我们可以通过调整截图区域的大小来达到完整截图的效果。

<style>
  .modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 9999;
  }
</style>
<div class="modal"></div>

const canvas = document.createElement('canvas');
const options = {
  canvas: canvas,
  logging: false,
  useCORS: true,
  allowTaint: false,
  backgroundColor: null,
  foreignObjectRendering: false,
  windowWidth: document.documentElement.scrollWidth,
  windowHeight: document.documentElement.scrollHeight
};
html2canvas(document.documentElement, options).then(function (canvas) {
  // ...
});