html2canvas截图不全，web前端开发生成的图片偏移不完整问题解决分享,完整攻略：
问题描述
在使用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) {
// ...
});
