5

I have tried html2canvas, but did not work as expected, because I am using Google Maps with custom markers and when it will just make a screenshot of the map without these markers.

I want to make a screenshot so that it looks like:

enter image description here

But the result is:

enter image description here

The chart does also not look that great. Are there any alternatives I can use?

Here is the code I used to create an image using html2canvas (where #downloadPDF is a 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);
            }
        });
    });
});

jnersn
  • 384
  • 1
  • 3
  • 14
Kevin S
  • 172
  • 2
  • 11
  • Hopefully, CSS does that. Are there any media queries being used? Check them. – Afzaal Ahmad Zeeshan Jan 05 '16 at 14:40
  • 2
    Since html2canvas uses the dom , if there is some other things like another canvas i think it may not work.I don't know if you can do it client side exclusively maybe you have to use something like phantomJS http://phantomjs.org/screen-capture.html – FabioCosta Jan 05 '16 at 14:41
  • @AfzaalAhmadZeeshan, I am using Bootstrap too and I see a few media queries, but I am not sure how these media queries affect the html2canvas library. – Kevin S Jan 05 '16 at 14:51
  • @FabioCosta, just client-sided. Do you know any other alternative? – Kevin S Jan 05 '16 at 14:52
  • 1
    @kevinS with just JS i am not sure. I would pinpoint what is not working. If it is a canvas you can try to convert the canvas to a image and see if this gives the exact output you want. If it gives you can replace temporalily the canvas with the generated image and use html2canvas – FabioCosta Jan 05 '16 at 14:58
  • Also the graph color is probably media queries, the custom markers are probably canvas so you porbably have 2 different issues here – FabioCosta Jan 05 '16 at 14:59
  • I am not using a canvas. That's why I used the library and since it is not working... What else can I do, without using this library? And for the graph color, I am not sure if I am using media queries. What I do know is that I am using the Google Pie Chart: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart – Kevin S Jan 05 '16 at 15:18
  • Possible duplicate of [Using HTML5/Canvas/JavaScript to take screenshots](http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots) – Zach Saucier Sep 10 '16 at 15:42

1 Answers1

1

Not sure on your hosting setup, but I have used PhantomJS to create screenshots of web pages, and save them as images or PDFs.

When you download the library, there is a rasterize.js in the example directory which allows you to pass in arguments to save a URL. You could modify this so that it pauses for a few seconds, then saves the page - giving the map enough time to load properly.

http://phantomjs.org

Luke P
  • 723
  • 7
  • 19