Heatmap Div to Image download

Question

I have problem, i like to download as image div content which is filled with map. I like to have button and on click to download all div content with map and heats.

The problem is when i go download with this example:

var element = $("#divMap"); // global variable
    var getCanvas; // global variable    
$("#btn-Preview-Image").on('click', function () {
            html2canvas(element, {
                onrendered: function (canvas) {
                    $("#previewImage").append(canvas);
                    getCanvas = canvas;
                }
            });

        });

        $("#btn-Convert-Html2Image").on('click', function () {
            var imgageData = getCanvas.toDataURL("image/png");
            // Now browser starts downloading it instead of just showing it
            var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
            $("#btn-Convert-Html2Image").attr("download", "map.png").attr("href", newData);
        });

It download only heats, the map from google is missing. i follow this example from link

Please help :)

score 0 · Answer 1 · answered Jun 27 '16 at 18:16

0

I suggest to go to http://www.w3schools.com/html/html_intro.asp to get your answer. You can find total variable information and jquery to solve your problem.

answered Jun 27 '16 at 18:16

Dusky Team

1
2

score 0 · Answer 2 · edited May 23 '17 at 11:58

So as i see the problem with the handler currently is that it does not recognize the map as being part of the particular canvas of the div you want to save into the image. In all honesty since you have not documented all of your code it is hard to tell you what the problem is or why it is doing it but as a suggestion you can try a few alternative ways to achieve the same end goal.

One of them is Html2Canvas as you have used but instead of following an example from the given link go to the docs: http://html2canvas.hertzen.com/examples.html

There are few other stack overflow questions that might give you the required information (1,2,3)

Hope this helps !

Heatmap Div to Image download

2 Answers2