如何在圖像上渲染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圖像文件。 熱圖疊加層和背景都包含在已保存的圖像中。