CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-markershtml2canvas
Prasad P
Prasad P

Reputation: 71

Map markers not getting captured in screenshot

I have been trying for a while on how to capture screenshot of a map. Finally managed to get in working on Chrome using Html2Canvas, capture screenshot functionality.

            $('#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"));                    
                }
            });

I was initially missing the proxy and useCORS property. Now the problem is that only the base map is captured and the markers that are plotted on them are not getting captured. Same is the case with the overlays on map. they are also not captured. How can i get this to work???? Any help would be great!!!

Thanks in advance,

Upvotes: 1

Views: 2542

Answers (1)

Korvo
Korvo

Reputation: 9714

server.js is only for servers with node.js (is a technology for server-side and not client-side).

useCORS: true not work with proxy: "proxy-script-server".

Or you use useCORS: or use proxy:

I recommend using proxy. I developed 3 scripts to use proxy, all do the same thing, but each is in a different programming language.

Proxy scripts:

ASP.NET (C#): https://github.com/brcontainer/html2canvas-csharp-proxy

PHP: https://github.com/brcontainer/html2canvas-php-proxy

ASP classic (vbscript): https://github.com/brcontainer/html2canvas-asp-vbscript-proxy

Python (works with any framework): https://github.com/brcontainer/html2canvas-proxy-python

Example with PHP:

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

note: SVG images can not be added to the CANVAS and then exported with .toDataURL() in the current Google Chrome (version 29)

Upvotes: 2

Related Questions