将HTML画布转换为图像。Javascript

我正在尝试将HTML画布导出到图像。但是当我导出图像时，我会不断得到img src=“undefined”。我直接将画布打印到页面上，并确认得到了正确的画布。这是我正在使用的代码。请让我知道你所看到的是错误的。CORS可能有问题（这是HTML5）

scope.getShuttleImage=函数（）{
var tmpPng
var成像元件
html2canvas（document.body.getElementsByClassName（“穿梭卡车”）{
乌塞科尔斯：没错，
onrendered：函数（画布）{
tmpPng=canvas.toDataURL（“image/png”）；
}
});
document.write（“”）//只是为了测试
};

我认为问题在于

html2canvas

是异步的。尝试将代码更改为以下内容。如@Archer所说

scope.getShuttleImage = function () {
        var tmpPng
        var imageElement
        html2canvas(document.body.getElementsByClassName("shuttle-truck"), {
            useCORS: true, 
            onrendered: function (canvas) {
                tmpPng = canvas.toDataURL("image/png");
                document.write('<img src= "' + tmpPng+'"/>"') // Just for testings sake

            }
        });
    };

scope.getShuttleImage=函数（）{
var tmpPng
var成像元件
html2canvas（document.body.getElementsByClassName（“穿梭卡车”）{
乌塞科尔斯：没错，
onrendered：函数（画布）{
tmpPng=canvas.toDataURL（“image/png”）；
document.write（“”）//只是为了测试
}
});
};

我认为问题在于

html2canvas

是异步的。尝试将代码更改为以下内容。就像@Archer说的

scope.getShuttleImage = function () {
        var tmpPng
        var imageElement
        html2canvas(document.body.getElementsByClassName("shuttle-truck"), {
            useCORS: true, 
            onrendered: function (canvas) {
                tmpPng = canvas.toDataURL("image/png");
                document.write('<img src= "' + tmpPng+'"/>"') // Just for testings sake

            }
        });
    };

scope.getShuttleImage=函数（）{
var tmpPng
var成像元件
html2canvas（document.body.getElementsByClassName（“穿梭卡车”）{
乌塞科尔斯：没错，
onrendered：函数（画布）{
tmpPng=canvas.toDataURL（“image/png”）；
document.write（“”）//只是为了测试
}
});
};

将

文档.write（）

移动到

onrendered

处理程序中。在将图像添加到页面后，该事件处理程序正在运行。谢谢。这是一个非常愚蠢的错误嘿-我们中最好的人都会这样：）移动

文档。write（）

进入

onrendered

处理程序。在您将图像添加到页面后，该事件处理程序正在运行。谢谢。这是一个相当愚蠢的错误Heh-我们中最好的人都会遇到：）谢谢！清晨傻瓜汉克！清晨傻瓜