How to render heatmap.js on an image?

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.

---

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.

链接地址: http://www.djcxy.com/p/25162.html

上一篇: JavaFX LineChart具有65000个数据点时的性能问题

下一篇: 如何渲染图像上的heatmap.js？