html2canvas 网页转图片 文字向下偏移解决方法
微wx笑
2026-04-22【运维日志】
0
0关键字：
html2canvas 截图
注意：这是 html2canvas 1.4.1 遇到的问题，在0.5版本没有这个问题，但是生成的图片文字不清晰；有网友反馈 1.0.0 也不存在这个问题；https://unpkg.com/html2canvas@1.0.0/dist/html
注意：这是 html2canvas 1.4.1 遇到的问题，在0.5版本没有这个问题，但是生成的图片文字不清晰；
有网友反馈 1.0.0 也不存在这个问题；
https://unpkg.com/html2canvas@1.0.0/dist/html2canvas.js
https://unpkg.com/html2canvas@1.0.0/dist/html2canvas.min.js
https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js
新版本，还没测试过
https://cdn.jsdelivr.net/npm/@html2canvas/html2canvas@1.6.3/dist/html2canvas.min.js
解决方法：
1、全局样式：
img {display: initial;}
2、换版本；
3、DS给的答案：社区里最推荐的方法
// 在调用 html2canvas 前执行
const style = document.createElement('style');
document.head.appendChild(style);
style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');
// 调用 html2canvas 的代码...
// 截图完成后删除该样式
style.remove();注意：这个方法只能这么用，设置为全局的样式 img { display: inline-block; } 没有效果；
html2canvas 1.4.1 还会遇到一个问题：
Element is not attached to a Document
原因是调用的时候传递的是jquery对象；
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/service/2026-04-22/2263.html
