Converting HTML Canvas to Image. Javascript

Question

I am trying to export my HTML Canvas to an Image. But when I export the image, I keep getting the img src = "undefined". I printed the canvas to the page directly and confirmed I am getting the correct canvas. Here's the code that I'm using. Please let me know what you see is wrong. May be a problem with CORS (This is 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
        };

Move the `document.write()` into the `onrendered` handler. That event handler is running *after* you add the image to the page. — Reinstate Monica Cellio, Dec 29 '16 at 15:15

score 2 · Answer 1 · answered Dec 29 '16 at 15:16

I believe the problem is with html2canvas being asynchronous. Try changing your code to the following. Like @Archer said

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

            }
        });
    };

Thanks! Early morning goof – user4493284 Dec 29 '16 at 15:18 — user4493284, Dec 29 '16 at 15:18

Converting HTML Canvas to Image. Javascript

1 Answers1