Search code examples
javascriptgoogle-mapscanvasscreenshothtml2canvas

why google maps and charts are not supported by html2canvas in javascript?


Iam doing screenshot using html2canvas with this method:

 makeScreenshot: function (button) {
        html2canvas(document.body, {
            onrendered: function(canvas) {
                new Ext.Window({
                    title: 'Screenshot',
                    width: 800,
                    height: 600,
                    resizable: true,
                    autoScroll: true,
                    preventBodyReset: true,
                    html: '<img src="' + canvas.toDataURL("image/png") + '" height="800"/>'
                }).show();
            }
        });
    }

getting this screenshot (on the image left dialog/window named Screeshot) enter image description here

as you can see, google map is not generated, just circles. also a charts ar not in the screenshot. what is wrong?


Solution

  • The map-tiles are images which may not be rendered, because the are located on a different domain.

    From the documentation:

    Limitations

    All the images that the script uses need to reside under the same origin for it to be able to read them without the assistance of a proxy.