How to render heatmap.js on an image?

Question

I am using heatmap.js to overlay a heatmap using the GoogleMaps plugin. I would like to be able to download the picture as an image along with the heatmap overlay. I tried the method heatmapInstance.getDataURL() only returns the overlay region and not along with the image on which it is overlayed.

Answer 1

You need to create an id which is used inside of your div and script tags

var heatmapInstance = h337.create({
    container: document.getElementById('heatMap')
});

As you can see I got the element by id 'heatmap'. So inside of your div where you want to place the picture on the page just call the id 'heatmap'

<div id='heatMap'></div>

Then simply place an image under the heatmap by using css

#heatMap {
    background-image: url(HinckleyTown.jpg);
    height: 445px;
    width: 840px;
}

I used the same id for the css, html and javascript.

Answer 2

I hit this problem recently and encountered all sorts of problems getting around it. The heatmap was generated with heatmap.js and displayed successfully over a background image using CSS background-image: as described above.

The problem came when trying to save both the heatmap and background as a single image on my local machine. I think this is the problem the OP was referring to. My understanding is that the problem arises due to how heatmap.js creates a canvas within an element such as a div

A detailed search didn't come up with a solution that didn't introduce a new set of problems. I did however come across a fairly neat solution which at least met my needs.

I used Steel.Liao's post ( https://stackoverflow.com/a/36077807/9438775 ) as the basis to clone the contents of the div using html2canvas.js into a new canvas . I then set the original div to display: none .

You can then just right-click on the new canvas to save it as a PNG image file. Both the heatmap overlay and the background are contained in the saved image.