嘿，我之前也踩过这个一模一样的坑！问题的核心在于html2canvas没法正确渲染不在当前文档DOM树里的元素——你创建的htmlObject只是存在内存里的节点，没挂载到页面上，库自然捕获不到它的渲染内容。

下面是具体的修复方案：

关键修复逻辑 #

• 必须把临时创建的DOM节点添加到页面中（可以给它加隐藏样式，完全不影响页面布局）
• 渲染完成后记得移除这个临时节点，避免污染DOM结构

修改后的完整代码 #

image_string = getCaptchaCheck_code(image_string).split("\"");
image_string = image_string[3];
image_string = getCaptchaCheck_code(image_string)
let fakeObject = '<div id="talltweets">'+image_string+'</div>';
let temp = document.createElement('div');
// 添加隐藏样式，把临时节点放到视口外
temp.style.position = "absolute";
temp.style.left = "-9999px";
temp.style.top = "-9999px";
temp.innerHTML = fakeObject;
// 把临时节点挂载到body，让它进入DOM树
document.body.appendChild(temp);
let htmlObject = temp.firstChild;

html2canvas(htmlObject, {
    onrendered: function (canvas) {
        var screenshot = canvas.toDataURL("image/jpg");
        document.getElementById("textScreenshot").setAttribute("src", screenshot);
        captcha = document.getElementById("textScreenshot").value;
        // 渲染完成后清理临时节点
        document.body.removeChild(temp);
    },
});

function getCaptchaCheck_code(str) {
    return decodeURIComponent(escape(this.atob(str)));
}

额外检查项 #

• 先通过console.log(image_string)确认解析后的内容是有效的HTML，避免是空内容或者无效标签导致的空白
• 如果解析后的内容用到了自定义字体、特殊样式，要确保这些样式在当前页面中能被正常访问，html2canvas需要读取到对应的样式规则才能正确渲染
• 如果你用的是旧版本html2canvas，建议升级到最新稳定版，旧版本对未挂载节点的兼容性更差

内容的提问来源于stack exchange，提问作者NvrKill