如何在图像上渲染heatmap.js？

Question

我正在使用heatmap.js使用GoogleMaps插件叠加热图。 我希望能够将图片与热图叠加图一起下载。 我尝试了HeatmapInstance.getDataURL（）方法仅返回覆盖区域，而不返回其覆盖的图像。

Answer 1

您需要创建一个在div和script标签内部使用的id

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

如您所见，我通过id'heatmap'获得了元素。 因此，在div中您想要在页面上放置图片的地方，只需调用id“ heatmap”

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

然后只需使用CSS将图像放在热图下

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

我对CSS，HTML和JavaScript使用了相同的ID。

Answer 2

我最近遇到了这个问题，遇到了各种各样的问题。 如上所述，热图是通过heatmap.js生成的，并使用CSS background-image在背景图像上成功显示：

尝试将热图和背景都保存为本地计算机上的单个图像时出现问题。 我认为这是OP所指的问题。 我的理解是，问题是由于heatmap.js如何在div等元素中创建画布而产生的

详细的搜索没有提供没有引入新问题的解决方案。 但是，我确实遇到了一个相当简洁的解决方案，至少可以满足我的需求。

我使用了Steel.Liao的帖子（ https://stackoverflow.com/a/36077807/9438775 ）作为使用html2canvas.js将div的内容克隆到新画布中的基础 。 然后，我将原始div设置为显示：none 。

然后，您可以右键单击新画布以将其另存为PNG图像文件。 热图叠加层和背景都包含在已保存的图像中。