function 之外没有定义变量

Question

有人可以帮我吗？ 我是新手，在执行我的代码时调试并尝试了几个代码。 我正在尝试将 base64 字符串传递到 JotForms 中，这样我就可以将我的图像生成到他们的 PDF 中。这是我的错误屏幕截图。 此处出错

这是我遇到问题的代码，这是我的 function。

 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);
    });
}

这是 function 之外的 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
});

太感谢了

Answer 1

您在函数内声明了data0101变量。 这意味着你只能在你的 function 内部使用它。一旦你离开这个 function，这个变量就不再可用。 这就是您收到此错误的原因。

要解决这个问题，您可以在这个 function 之前将变量声明为全局变量。 就像是：

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