Creating a “screenshot” of the current website using HTML or JavaScript?

Question

I tried html2canvas but did not work as expected, because I use Google Maps with custom markers, and when it just takes a screenshot without these markers.

I want to take a screenshot so that it looks like this:

But the result:

The diagram also does not look so wonderful. Are there any alternatives that I can use?

Here is the code I used to create the image using html2canvas (where #downloadPDF is the button):

<script type="text/javascript"> jQuery(document).ready(function ($) { $('#downloadPDF').click(function () { html2canvas($(".map"), { logging: true, useCORS: true, onrendered: function (canvas) { var imgData = canvas.toDataURL('image/png'); window.open(imgData); } }); }); }); 

Answer 1

Not sure about hosting settings, but I used PhantomJS to take screenshots of web pages and save them as images or PDF files.

When you download the library, there is rasterize.js in the examples directory, which allows you to pass arguments to save the URL. You can change this so that it pauses for a few seconds and then saves the page - give the map enough time for it to load correctly.

http://phantomjs.org