函数外变量未定义：如何将base64字符串传入JotForm生成PDF？

我是编程新手，调试多次仍碰到「Variable is not defined outside of the function」错误。想把截图生成的base64字符串传到JotForm，让它在PDF里生成对应图片。以下是报错截图、出问题的screenshot函数代码及外部JotForm代码，恳请协助解决：

报错截图：

问题函数代码 #

function screenshot() {
    html2canvas(document.body, {
        scrollY: -window.scrollY,
        crossOrigin : 'Anonymous',
        allowTaint: true,
        foreignObjectRendering: true, 
    }).then(function (canvas) {
        document.body.appendChild(canvas);
        var data0101 = document.body.appendChild(canvas).toDataURL();
        console.log('Result', data0101)
        document.body.removeChild(canvas);
    });
}

外部JotForm代码 #

var myImage = data0101;
console.log(myImage)
var submissionData = {
    valid: true,
    value: JFCustomWidgetUtils.buildMetadata('imagelinks', [{
        'name': "Data from Widget",
        'base64': myImage
    }])
}
JFCustomWidget.subscribe('ready', function (data333333) {
    console.log("ready message arrived from JotForm", data333333);
    JFCustomWidget.sendData(submissionData);//Do this as soon as your image is ready
    JFCustomWidget.sendsubmit(submissionData);//This will run when the submit button is clicked
});

问题原因 #

data0101是screenshot函数内部then回调里的局部变量，外部代码根本访问不到，所以触发未定义错误。另外代码里还有个小问题：document.body.appendChild(canvas)被重复调用了两次，完全没必要。

修复方案 #

把JotForm的提交逻辑移到截图完成的回调里，确保拿到base64数据后再处理提交，同时去掉重复添加canvas的冗余代码：

function screenshot() {
    html2canvas(document.body, {
        scrollY: -window.scrollY,
        crossOrigin : 'Anonymous',
        allowTaint: true,
        foreignObjectRendering: true, 
    }).then(function (canvas) {
        // 直接用canvas生成base64，无需先添加到页面
        var data0101 = canvas.toDataURL();
        console.log('Result', data0101);
        
        // 在这里处理JotForm数据提交
        var submissionData = {
            valid: true,
            value: JFCustomWidgetUtils.buildMetadata('imagelinks', [{
                'name': "Data from Widget",
                'base64': data0101
            }])
        };
        
        JFCustomWidget.subscribe('ready', function (data333333) {
            console.log("ready message arrived from JotForm", data333333);
            JFCustomWidget.sendData(submissionData);
            JFCustomWidget.sendsubmit(submissionData);
        });
    });
}

补充提示 #

• 如果需要页面加载完成后自动执行截图，可添加：window.addEventListener('DOMContentLoaded', screenshot);
• 确保html2canvas库已正确引入，否则会出现其他报错。

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