1

我一直在尝试如何捕获地图的屏幕截图。终于设法使用 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 属性。现在的问题是只捕获了基本地图，而没有捕获绘制在其上的标记。地图上的叠加层也是如此。他们也没有被捕获。我怎样才能让它工作？？？？任何帮助都会很棒！！！

提前致谢，

4

1 回答 1

2

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中，然后.toDataURL()在当前的Google Chrome（版本 29）中导出

于 2013-09-06T22:43:21.157 回答