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

Question

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

Answer 1

您需要创建一个在div和脚本标记内使用的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 canvas 而产生的>

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

我以Steel.Liao的帖子（https://stackoverflow.com/a/36077807/9438775）为基础，使用 html2canvas.js 克隆 div 的内容>放入新的画布。然后，我将原始 div 设置为 display：none 。

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