为什么javascript中的html2canvas不支持Google地图和图表？

Question

我用html2canvas通过以下方法做屏幕截图：

 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();
            }
        });
    }

获取此屏幕截图（在图像左侧对话框/名为Screeshot的窗口上）

如您所见，不会生成Google地图，而只是生成圆圈。 屏幕截图中也没有图表。 怎么了？

Answer 1

地图图块是可能无法渲染的图像，因为它们位于不同的域上。

从文档中 ：

Answer 2

添加useCORS：true将解决此问题。

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();
        }
    });
}

Answer 3

对于Google图表，我整夜都在寻找解决方案，最后它是如此简单：在调用html2canvas之前，使用canvg（）将呈现的图表转换为canvas。 Google的图表是svg。