之前用html2canvas生成过海报，其中遇到的坑还不少，这次总结了下遇到过的问题，希望以后不会踩坑。

1. 页面存在滚动条的情况下，截图不全

• 场景：当页面内容超出屏幕高度，出现滚动条时，使用 html2canvas 截图，可能会导致超出可视区域的内容无法被完整截取。
• 解决办法：在截图之前，通过 JavaScript 控制滚动条至顶部，确保所有内容都在视口内。可以使用 window.scrollTo(0, 0) 方法来实现。
• 示例代码：

window.scrollTo(0, 0);
html2canvas(document.body).then(canvas => {
// 处理截图后的 canvas
document.body.appendChild(canvas);
});

2. 跨域资源加载失败

• 场景：当页面中包含跨域加载的资源（如图片）时，html2canvas 无法渲染这些资源，导致画布上缺少相关内容。
• 解决办法：在调用 html2canvas 时，启用 useCORS 选项，允许跨域资源加载。
• 示例代码：

html2canvas(document.body, { useCORS: true })
.then(canvas => {
// 处理截图后的 canvas
document.body.appendChild(canvas);
});

3. 动态加载的内容无法正确捕获

• 场景：如果尝试转换在页面加载后动态添加的内容，html2canvas 可能无法正确捕获这些内容。
• 解决办法：在调用 html2canvas 之前，确保你的动态内容已经完全加载并渲染到页面上。可以使用 Promise 或回调函数来确保这一点。

示例代码：// 假设 dynamicContent 是动态加载的内容
dynamicContent.then(() => {
html2canvas(document.body).then(canvas => {
// 处理截图后的 canvas
document.body.appendChild(canvas);
});
});

4. 背景色出现奇怪灰色

• 场景：在截图过程中，背景色可能会出现不期望的灰色或其他颜色，导致截图效果与预期不符。
• 解决办法：可以通过增大 scale 参数来解决，或者设置 backgroundColor 为透明。
• 示例代码：

html2canvas(document.body, {
scale: 2,
backgroundColor: 'transparent'
}).then(canvas => {
// 处理截图后的 canvas
document.body.appendChild(canvas);
});

5. 渲染不完整或样式丢失

• 场景：渲染后的画布与实际网页显示不一致，部分样式、图片或内容缺失。
• 解决办法：确保所有资源加载完成，避免使用复杂的 CSS 特性，尽量使用内联样式。
• 示例代码：

window.onload = function() {
html2canvas(document.body).then(canvas => {
// 处理截图后的 canvas
document.body.appendChild(canvas);
});
};

6. SVG 标签无法截取

• 场景：当截图区域包含 SVG 标签时，SVG 内容可能无法被正确截取。
• 解决办法：将 SVG 转换为 Canvas，然后再进行截图。
• 示例代码：

// 假设 svgElem 是 SVG 元素
var canvas = document.createElement('canvas');
canvas.width = svgElem.clientWidth;
canvas.height = svgElem.clientHeight;
canvg(canvas, svgElem.outerHTML);
html2canvas(canvas).then(canvas => {
// 处理截图后的 canvas
document.body.appendChild(canvas);
});

创作不易，如果这篇文章对你有用，欢迎点赞关注加评论哦

小伙伴们在工作中还遇到过其他应用场景吗，欢迎评论区留言讨论哦。