如何在图像上渲染heatmap.js

How to render heatmap.js on an image?

本文关键字：heatmap js 图像      更新时间：2023-09-26

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

您需要创建一个id，该id用于div和脚本标签中

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

正如你所看到的，我通过id"热图"得到了这个元素。因此，在您想要将图片放置在页面上的div内部，只需调用id"heatmap"

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

然后使用css 将图像简单地放置在热图下

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

我对css、html和javascript使用了相同的id。

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

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

详细的搜索并没有找到一个不会引入一系列新问题的解决方案。然而，我确实遇到了一个相当巧妙的解决方案，至少满足了我的需求。

我用的是钢铁。廖的帖子（https://stackoverflow.com/a/36077807/9438775）作为基础，使用html2canvas.js将div的内容克隆到新的canvas中。然后，我将原来的div设置为display:none。

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

相关文章：