无需登录 数据私有 本地保存

图片热力图生成器 - 点击位置密度图

21
0
0
0

图片热力图生成器

上传图片，点击生成点击密度热力图 · 可视化用户关注区域

点击次数：0
拖拽图片到此处
或点击下方上传按钮
也可直接点击空白区域体验
控制面板
支持 JPG / PNG / WebP / GIF

常见问题与知识点

点击热力图（Click Heatmap）是一种数据可视化技术，通过颜色密度来展示用户在图片或网页上的点击分布情况。颜色越暖（红/黄）代表点击越密集的区域，颜色越冷（蓝/绿）代表点击较少的区域。

主要用途：
  • UI/UX分析：了解用户最常点击的按钮和区域，优化界面布局
  • 广告优化：分析广告位的点击效果，调整投放策略
  • 电商转化：识别商品图片中用户最关注的细节区域
  • 游戏设计：分析玩家操作热点，优化游戏界面
  • 眼动追踪替代：低成本模拟用户注意力分布

使用步骤：
  1. 上传图片：点击"选择图片"按钮或将图片拖拽到画布区域，支持 JPG/PNG/WebP 格式
  2. 点击画布：在图片上点击来模拟用户点击位置，每次点击会实时生成热力点
  3. 调整参数：使用滑块调节热力半径、强度和透明度，选择喜欢的颜色主题
  4. 导出结果：点击"导出图片"下载带有热力图叠加的完整图片
你也可以点击"加载演示数据"快速查看效果，无需上传图片。

热力图使用颜色梯度来表示点击密度：
  • 🔴 红色/橙色：点击密度最高的区域（热点）
  • 🟡 黄色：点击密度中高的区域
  • 🟢 绿色：中等点击密度
  • 🔵 蓝色/青色：点击密度较低的区域
  • ⚪ 透明：几乎没有点击的区域
颜色越暖，表示该位置被点击的次数越多、频率越高。本工具提供多种颜色主题（经典彩虹、火焰、海洋、森林）供你选择。

三个核心参数：
  • 热力半径：控制每个点击点的影响范围。半径越大，单个点击覆盖的区域越广，适合展示整体趋势；半径越小，定位越精确
  • 热力强度：控制每个点击点的"权重"。强度越高，热力颜色越深、越饱和，重叠区域的密度显示越明显
  • 透明度：控制热力图叠加层的整体透明度。调低可以更清晰地看到底层图片细节
建议根据图片尺寸和点击数量灵活调整这些参数以获得最佳可视化效果。

移动端支持：✅ 完全支持！工具已针对移动端进行响应式优化，你可以在手机或平板上的浏览器中正常使用，包括触摸点击和手势操作。

数据隐私：🔒 所有操作均在本地浏览器中完成，不会上传任何数据到服务器。图片和点击数据仅存在于你的设备内存中，关闭页面后数据即被清除。如需保存，请使用"导出图片"功能下载结果。

技术实现原理（简化版）：
  1. 点击记录：每次点击的坐标被记录为相对位置（百分比坐标）
  2. 灰度叠加：在离屏Canvas上，每个点击位置绘制一个白色径向渐变圆（中心亮、边缘透明），使用"lighter"混合模式让重叠区域更亮
  3. 颜色映射：读取灰度像素数据，根据亮度值映射到热力图颜色（如亮度最高→红色，中等→黄色/绿色，较低→蓝色）
  4. 叠加显示：将着色后的热力图层以设定的透明度覆盖在原图上
这种实现方式与市面上专业热力图库（如Heatmap.js）的核心算法一致。
🔧 相关工具