javascript - 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)

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

Answer 1

添加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 2

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

从文档中：

限制

脚本使用的所有图像都需要位于同一来源下，以便无需代理帮助即可读取它们。

Answer 3

对于谷歌图表，我花了一整夜寻找解决方案，最后它变得如此简单：在调用 html2canvas 之前，使用 canvg() 将呈现的图表转换为画布。谷歌的图表是 svg。