1

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,

Prasad P
  • 71
  • 1
  • 10
  • I suspect the issue is that only the base tile layer is rendered via a ``. Markers and Overlays are simply DOM elements rendered on top of the base tiles. – André Dion Jul 30 '13 at 10:55
  • I believe the only legal way to display an image/screen capture of a Google Map is to use a static map (but IANAL). Have you verified you can do this legally by checking the [TOS](https://developers.google.com/maps/faq#tos)? – geocodezip Jul 30 '13 at 12:56
  • Hi! My answer solve your problem? If so check as "correct", if not tell me what is missing. – Protomen Apr 12 '15 at 14:51
  • See this answer as a workaround: http://stackoverflow.com/a/29897324/2652861 – Viscis Apr 27 '15 at 13:39
  • This might help you: http://stackoverflow.com/questions/26402789/html2canvas-combine-2-captured-canvases-into-one – Abhijeet Salunkhe Aug 20 '16 at 12:49

1 Answers1

2

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)

Protomen
  • 9,471
  • 9
  • 57
  • 124
  • can you give example with python. I am also having same issue. – Bhim Prasad Ale Jun 03 '14 at 07:21
  • @Gulherme_Nascimento Ya I have seen the python proxies too. But I confused how to use it :( – Bhim Prasad Ale Jun 04 '14 at 06:05
  • @BhimPrasadAle Python with `mod_python` or `mod_fastcgi` or `uWSGI` or `mod_wsgi` or `django`? – Protomen Jun 06 '14 at 22:16
  • @Guilherme_Nascimento I am using python flask. – Bhim Prasad Ale Jun 07 '14 at 06:09
  • @BhimPrasadAle As I understand the ["Python Flask"](http://flask.pocoo.org/) is a framework that does not use conventional servers, yourself creates the connection and the answer, I'm sure (like "node.js")? Your problem is not with the "proxy". It seems that your problem is a lack of understanding of framework (python Flask). Correct me if I'm wrong. – Protomen Jun 07 '14 at 12:52
  • ya I know I am missing something but still not able to figure it out. about flask I am just a newbie.Will update you if I figure it out. – Bhim Prasad Ale Jun 07 '14 at 16:56
  • @BhimPrasadAle Note that the proxy in python developed by "Niklas von Hertzen" uses "Google Appengine" you got me interested in developing a proxy with better documentation. If you can wait. – Protomen Jun 07 '14 at 18:03
  • ya I tried to use that proxy using "Google Appengine" but didn't find any connection on my project. It would be great if you develop it :) . Hope it would help me too. :) – Bhim Prasad Ale Jun 07 '14 at 18:08
  • @BhimPrasadAle I create um lib in python, work with any framework. I added an example with Flask works for you to see and adapt to your needs. – Protomen Jun 09 '14 at 02:17
  • thank you. I will let you know after I checked it. :) – Bhim Prasad Ale Jun 09 '14 at 05:38
  • I am geting "GET http://127.0.0.1:5555/home/bhim/remo/App/images/a0af53c02bd2f2aed37f1d895edcf3485117c512.png [HTTP/1.0 404 NOT FOUND 3ms]" In the image folder I have the file of the above name. Is there the routing problem ? – Bhim Prasad Ale Jun 09 '14 at 11:18
  • @BhimPrasadAle Create a question with details and your source-code. Note: `virtual_path` need "relative path" and non "absolute path" – Protomen Jun 09 '14 at 12:48
  • Please look at http://stackoverflow.com/questions/24009869/google-map-screen-capture-is-not-working-for-marker-and-marker-cluster-using-htm – Bhim Prasad Ale Jun 09 '14 at 13:17