Question

我一直在尝试捕捉地图的截图。最后设法使用Html2Canvas开始使用Chrome，捕获屏幕截图功能。

            $('#map_canvas').html2canvas({                 
               proxy: "server.js",
               useCORS: true,
               onrendered: function (canvas) {
                    //Set hidden field's value to image data (base-64 string)
                    $('#img_val').val(canvas.toDataURL("image/png"));                    
                }
            });

我最初错过了proxy和useCORS属性。现在的问题是只捕获了基本地图，并且没有捕获在它们上绘制的标记。地图上的叠加层也是如此。它们也没有被捕获。我怎么能让这个工作????任何帮助都会很棒!!!

提前致谢，

Answer 1

server.js 仅适用于 node.js 的服务器（服务器端而非客户端的技术）。

useCORS: true无法与proxy: "proxy-script-server"合作。

或者您使用useCORS:或使用proxy:

我建议使用代理。我开发了3个脚本来使用代理，所有都做同样的事情，但每个都使用不同的编程语言。

代理脚本：

ASP.NET（C＃）： https://github.com/brcontainer/html2canvas-csharp-proxy

<强> PHP ： https://github.com/brcontainer/html2canvas-php-proxy

ASP经典（vbscript）： https://github.com/brcontainer/html2canvas-asp-vbscript-proxy

Python（适用于任何框架）： https://github.com/brcontainer/html2canvas-proxy-python

PHP示例：

html2canvas( [ document.body ], {
    "proxy":"html2canvasproxy.php",
    "onrendered": function(canvas) {
        var uridata = canvas.toDataURL("image/png");
        window.open(uridata);
    }
});

注意：SVG图像无法添加到 CANVAS 然后导出在当前 Google Chrome（第29版）
中使用.toDataURL()

在屏幕截图中未捕获地图标记

1 个答案: