Html2canvas ...google Map Is Not Rendering

I am running a Apache Server . I have a simple screen capture set up using Html2canvas .The capture function is rendering a blank Image . I have tried numerous ways to configure th

Solution 1:

Since I was just having a similar problem and I managed to solve it maybe this will help you too. It turns out to be a problem with loading images from a different (external) domain. In our case the external domain is something like maps.googleapis.com. html2canvas allows us to use a proxy to solve that problem so instead of directly trying to load the images cross-domain we use the local proxy to retrieve the images, save them and pass them on to html2canvas.

I personally used this proxy: PHP html2canvas proxy

Just download it and then make sure to create the data directory that the proxy uses exists and is writable. By default the directory is called 'data' and it should be in your webroot.

Then change the piece of JavaScript to use the proxy:

html2canvas($('#googleMap'), {
    proxy: 'html2canvasproxy.php',
    useCORS: false,
    onrendered: function (canvas) {
        var dataUrl= canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

        window.location.href = dataUrl;
    }
 });

Also make sure to set useCORS to false, because you can't use both a proxy and have useCORS enabled.