将HTML Canvas转换为图像。使用Javascript

Question

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

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

Answer 1

我认为问题在于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

            }
        });
    };