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

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

您需要创建一个用于div和script标记内部的id

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

正如你所看到的，我通过id‘heatmap’得到了元素。因此，在你的div中，你想把图片放在页面上，只需调用id“heatmap”

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

---

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

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

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

详细的搜索并没有找到一个不会带来一系列新问题的解决方案。不过，我确实找到了一个相当简洁的解决方案，至少满足了我的需求

我使用Steel.Liao的post（）作为基础，使用html2canvas.js将div的内容克隆到一个新的画布中。然后我将原始的div设置为display:none

---

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

我对heatmap.js没有任何经验。但我看到有一个用于热图的节点模块。如果调整该div的大小会发生什么#见鬼去吧

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