如何在生成的热图上显示图像？

Posted 2023-03-28

【中文标题】如何在生成的热图上显示图像？

【英文标题】：How can I display an image on top of a generated heatmap?

【发布时间】：2021-08-14 19:28:17

【问题描述】：

我正在尝试使用 heatmap.js 创建热图，按照这篇文章中的说明进行操作：How to render heatmap.js on an image?

我的所有代码都与该示例中的代码相同。只是一个简单的生成的热图，在 CSS 中添加了背景图像。请查看该帖子的截图：

但我想在热图上显示一个图像，所以是前景图像而不是背景图像。

我尝试过使用 plotly，但不幸的是，这是为了在带有 SPIFFS 的 ESP-32 上运行，所以我的空间和处理能力非常有限。即使在我使用部分捆绑包将文件大小减小到足够小之后，网页也根本无法加载。如果可能的话，我真的更喜欢使用 heatmap.js，因为它的占用空间要小得多。

为了进一步解释我想要做什么，我想把这个半透明的图像放在生成的热图之上：

所以最终想要的结果看起来像这样，只显示前景图像透明部分内的热图：

我使用的所有代码都与前面提到的帖子相同，只是一个简单的生成的热图，并在 CSS 中添加了背景图像。我还在这里使用了这个文档来构建一个示例热图，https://www.patrick-wied.at/static/heatmapjs/docs.html

有没有使用 HTML/CSS/javascript 的简单方法？

【参考方案1】：

我不知道热图，因此无法对此进行测试，但从问题中给出的信息来看，如果背景图像的放置如图所示，那么应该可以放置前景图像。

我们所做的是在 #heatmap 上设置一个 after 伪元素的样式，为其提供正确的尺寸，使用 z-index 将其放在热图元素上方，并为其提供所需的图像作为其背景。然后图像应该看起来位于热图元素上方 - 我假设它会遮住它的一部分。

您需要确保热图元素已定位，以便其后伪元素知道将自身定位在相关位置。

#heatmap 
  width: as you want
  height: as you want
  background-image: if you still want it to have one
  any other styling you want heatmap to have

  position: relative;


#heatmap::after 
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* make sure this is big enough - higher than the heatmap's z-index */
  background-image: url(the image you want to be in the foreground);
  background-size: cover; /* or contain depending on what you want */
  background-repeat: no-repeat;
  background-position: center center; /*or wherever you want it */

【讨论】：

感谢您的建议！我会试一试，然后把结果发回这里！