2

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?

r.r
  • 7,023
  • 28
  • 87
  • 129

3 Answers3

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.

Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
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();
        }
    });
}
ABHILASH SB
  • 2,122
  • 2
  • 21
  • 31
  • 1
    I am using the useCORS: true parameter and have found that it works most of the time, but not all the time. – Aaron Kreider Jun 04 '14 at 20:52
  • @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: http://code.google.com/p/canvg/) and then convert the whole map to canvas using html2canvas. – ABHILASH SB Jun 06 '14 at 05:13
  • 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. – Aaron Kreider Jun 06 '14 at 17:54
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.

Miyuutsu
  • 1