jQuery中html2canvas的onrendered回调未触发问题求助

点击提交按钮时，需要对页面中class为final-print的div进行截图，再通过script.php将截图保存到服务器。目前控制台仅打印Starting，onrendered回调里的日志完全没有输出，也无任何报错，流程卡住无法继续。

原脚本代码 #

html2canvas($(".final-print")[0], {
    console.log('starting');
    onrendered: function(canvas) {
    console.log('Rendered');
    var imgsrc = canvas.toDataURL("image/png");
    console.log(imgsrc);
    var dataURL = canvas.toDataURL();
    $.ajax({
       type: "POST",
       url: "script.php",
       data: {
           imgBase64: dataURL
       }
    }).done(function(o) {
        console.log('Check Server For Image');
    });
}
});

原HTML代码 #

<div class="final-print" style="width:400px;height:300px;padding: 9px;background-image: url('images/back.jpg');background-position: center;background-repeat: no-repeat;background-size: cover;border: 3px solid #000000;&quot;"></div>

问题排查与修复 #

1. 脚本语法错误（核心问题） #

你直接把console.log('starting')写在了html2canvas的配置对象里，这是非法的对象语法——对象内部只能是键:值的结构，不能直接放执行语句。这个错误会导致html2canvas初始化失败，自然不会进入onrendered回调。

2. HTML语法错误 #

原div的style属性末尾多了一个"，会导致浏览器解析style属性异常，可能影响html2canvas对元素的识别与渲染。

修正后的代码 #

脚本代码（兼容旧版html2canvas）

console.log('starting');
html2canvas($(".final-print")[0], {
    onrendered: function(canvas) {
        console.log('Rendered');
        var dataURL = canvas.toDataURL("image/png");
        console.log(dataURL);
        $.ajax({
            type: "POST",
            url: "script.php",
            data: {
                imgBase64: dataURL
            }
        }).done(function(o) {
            console.log('Check Server For Image');
        });
    }
});

脚本代码（推荐：适配新版html2canvas，onrendered已废弃）

新版html2canvas返回Promise，用then替代onrendered更可靠，还能捕获错误：

console.log('starting');
html2canvas($(".final-print")[0])
.then(function(canvas) {
    console.log('Rendered');
    var dataURL = canvas.toDataURL("image/png");
    console.log(dataURL);
    $.ajax({
        type: "POST",
        url: "script.php",
        data: {
            imgBase64: dataURL
        }
    }).done(function(o) {
        console.log('Check Server For Image');
    });
})
.catch(function(err) {
    console.error('截图失败:', err);
});

修正后的HTML代码

<div class="final-print" style="width:400px;height:300px;padding: 9px;background-image: url('images/back.jpg');background-position: center;background-repeat: no-repeat;background-size: cover;border: 3px solid #000000;"></div>

验证步骤 #

1. 替换修正后的代码，打开浏览器控制台；
2. 点击触发按钮，查看是否打印Rendered；
3. 如果仍有问题，检查script.php是否能正常接收POST请求，以及html2canvas的版本是否与代码兼容。

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