将 HTML 画布转换为图像。 Javascript [重复]答案

【问题标题】：Converting HTML Canvas to Image. Javascript [duplicate]将 HTML 画布转换为图像。 Javascript [重复]
【发布时间】：2017-05-13 22:29:11
【问题描述】：

我正在尝试将我的 HTML 画布导出到图像。但是当我导出图像时，我不断得到 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
        };

【问题讨论】：

将document.write() 移动到onrendered 处理程序中。该事件处理程序正在运行您将图像添加到页面。
谢谢。这是一个非常愚蠢的错误
嘿——这发生在我们最好的人身上:)

标签： javascript html

【解决方案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

            }
        });
    };

【讨论】：

谢谢！清晨的混蛋