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

Question

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?

Dr.Molle · Accepted Answer · 2013-09-11 15:40:59Z

3

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.

answered Sep 11, 2013 at 15:40

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ABHILASH SB · Accepted Answer · 2014-03-08 08:37:20Z

3

Add useCORS: true will solve this issue.

makeScreenshot: function (button) {
    html2canvas(document.body, {
        useCORS: true,
        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();
        }
    });
}

answered Mar 8, 2014 at 8:37

ABHILASH SB

2,2322 gold badges22 silver badges33 bronze badges

3 Comments

Aaron Kreider Over a year ago

I am using the useCORS: true parameter and have found that it works most of the time, but not all the time.

ABHILASH SB Over a year ago

@AaronKreider: As the google map images are in svg, direct convertion to html using html2canvas is not possible, so first you need to convert all map svg elements to canvas ( using canvg: code.google.com/p/canvg) and then convert the whole map to canvas using html2canvas.

Aaron Kreider Over a year ago

If it isn't possible - then my implementation shouldn't work. But it does work a lot of the time. You can try it at www.justicemap.org and Save as Image. I'm using html2canvas on its own.

Miyuutsu · Accepted Answer · 2014-01-04 16:02:27Z

0

For Google chart i spent all the night to find a solution and finally it was so simple: before calling html2canvas, convert the charts rendered to canvas with canvg(). Charts of Google are svg.

answered Jan 4, 2014 at 16:02

Miyuutsu

1

Collectives™ on Stack Overflow

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

3 Answers 3

Limitations

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Limitations

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related