javascript - 将 HTML Canvas 转换为图像。 JavaScript

Question

这个问题已经有答案了:

HTML5 Canvas to PNG File (4 个回答)

已关闭 6 年前。

我正在尝试将 HTML Canvas 导出到图像。但是当我导出图像时，我不断收到 img src =“undefined”。我直接将 Canvas 打印到页面上，并确认我得到了正确的 Canvas 。这是我正在使用的代码。请让我知道您所看到的内容是错误的。可能是 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

            }
        });
    };