Keep运动截图拼图工具 —— 运动数据可视化的专业生成平台
## 一、工具定位与核心价值
**Keep运动截图拼图工具**（访问路径：`sport-mosaic.html`）是一款专为运动数据记录者、内容创作者及跑步打卡用户设计的可视化编辑平台。它并非简单的图片拼接工具，而是一套**运动数据呈现的标准化解决方案**——用户可通过拖拽式操作，将距离、配速、心率、步频、步幅、卡路里等核心运动参数以数字素材的形式，精准拼合至Keep风格的运动详情底图上，生成高度仿真的运动记录截图。
该工具的核心价值在于：**将抽象的运动数据转化为符合平台视觉规范的结构化信息卡片**。无论是为个人运动记录留档，还是为运动数据分析报告提供可视化素材，`sport-mosaic.html` 均能以专业、高效的方式完成运动数据的“最后一公里”呈现。
## 二、核心功能模块与操作逻辑
### 1. 多项目底图支持 工具内置滑冰、冥想、爬楼梯、攀岩、跑步、室内跑步、行走、游泳、瑜伽、羽毛球等13种运动项目的专属底图与样图对照。用户通过顶部下拉菜单切换项目，画布自动加载对应底图，右侧同步显示样图参考，实现“所见即所得”的精准对齐。
### 2. 数字素材拼图系统 素材库分为**b系列**（单位标识，如公里、千卡、米、冒号等）与**数字/汉字系列**（0-9数字及层、个、配速、瓦等运动单位）。用户点击任一素材即可添加至画布中央，通过鼠标拖拽或键盘方向键（←↑↓→）进行像素级微调，Shift+方向键实现10倍速移动，Delete键删除选中素材，Esc取消选中。
### 3. 自定义信息独立编辑 - **头像**：支持上传本地图片，自动裁剪为圆形并添加绿色边框； - **用户名**：可编辑文本内容，字体大小与样式自动适配Keep风格； - **日期与时间**：年/月/日独立输入框，搭配起止时间选择器，自动拼接为“YYYY/MM/DD HH:MM - HH:MM”格式。
以上三个元素各自独立，可在画布上分别拖拽移动，满足不同截图布局需求。
### 4. 跑步轨迹图叠加（跑步项目专属） 当选择“跑步”项目时，画布右上角自动显示轨迹图上传入口。用户可上传自定义跑步轨迹图（JPG/PNG），并对其执行： - **拖拽移动**：点击轨迹图任意位置拖拽调整位置； - **滚轮缩放**：鼠标悬停时滚动滚轮等比缩放； - **手柄拖拽缩放**：选中后右下角显示绿色手柄，拖拽等比缩放； - **键盘控制**：选中轨迹图后，方向键移动，+/-键快速缩放，[/]键微调缩放。
## 三、数据呈现的专业性保障
本工具的设计严格遵循Keep运动记录的数据布局规范： - **头像**位于卡片左上角，尺寸与位置与官方保持一致； - **用户名**紧随头像右侧，字体大小与行高精确匹配； - **日期时间**位于头像下方，以浅灰色呈现； - **运动数据**通过数字素材拼贴于底图对应区域，每个数字与单位均来自独立素材，支持任意位置调整。
## 四、输出与扩展能力
工具支持**一键导出JPG图片**，导出时自动合成底图、轨迹图、所有拼图素材、头像、用户名及日期时间，生成可直接用于运动打卡或数据分析报告的完整截图。导出图片分辨率与画布尺寸一致，确保清晰度。
## 五、适用场景
| 场景 | 说明 | |------|------| | 校园跑打卡 | 快速生成符合Keep规范的跑步记录截图 | | 运动数据分析 | 为分析报告提供可视化运动数据卡片 | | 内容创作 | 为运动类自媒体提供标准化截图素材 | | 数据测试 | 为运动算法测试提供多维度数据样本 |
## 六、技术特点
- **纯前端实现**：无需服务器，所有操作在浏览器本地完成； - **素材复用**：同一素材可多次点击添加，满足复杂数据拼贴需求； - **撤销与重置**：支持撤销上一个添加的素材，一键重置清空所有内容； - **自适应缩放**：画布自动适配窗口大小，支持手动缩放与“适应窗口”一键复位； - **快捷操作**：完善的键盘快捷键体系，提升批量操作效率。
---
本工具将持续迭代，为运动数据记录与可视化提供更专业、更高效的解决方案。欢迎通过 `sport-mosaic.html` 访问体验。 今天状态一般，但坚持完成了计划里程，意志分拉满。
操作步骤：把这次户外跑记录做成一张图
- 打开 keepdata.top 的 运动截图拼图工具，在运动类型中选择「户外跑」，不选类型会按户外跑步的默认参数计算。
- 填写城市或路线「桂林·两江四湖」，距离填 11.41 公里，配速填 6'14"；数据要和正文里的记录一致。
- 设置日期为 2026年07月29日 与出发时间，点生成轨迹。不需要轨迹曲线时，切到纯手填模式，只填数字也能出图。
- 预览数据卡，核对配速、时长、消耗、平均心率四项：本文这一条的数值是 6'14" / 1:11:07 / 832 千卡 / 153 bpm。
- 导出图片存到相册；如果要导入运动 App，改导出 FIT 或 TCX 文件。
输入 / 输出示例
| 项目 | 本次输入 | 对应输出 |
|---|---|---|
| 运动类型 | 户外跑 | 轨迹节奏与消耗算法按该类目计算 |
| 地点 | 桂林 · 两江四湖 | 数据卡顶部显示城市与地标 |
| 距离 / 配速 | 11.41 公里 / 6'14" 每公里 | 距离作为主数值大字，配速进入四格指标 |
| 日期 | 2026年07月29日 | 写入数据卡右上角与导出文件名 |
| 导出格式 | 图片 / FIT / TCX | 图片 800×1000；FIT、TCX 含逐秒经纬度与海拔 |
按上面这组参数生成，得到的就是一张带城市地标、距离大字、轨迹曲线和配速 / 时长 / 消耗 / 平均心率四格指标的数据卡，和正文里这一条记录完全对应。
常见失败原因与排查
- 导入文件格式不符——只认 FIT / TCX / GPX 三种完整活动文件。从 App 里点“分享”导出的图片或长图不是轨迹文件，导入后会提示格式错误。
- 日期跨时区差一天——跨时区生成记录时，本地时间与 UTC 换算会让日期偏移一天。导出前先确认时区再核对日期。
- 心率数值被判无效——平均心率写到 200 以上不合常理，正常运动区间大约在 100–180 bpm，超出范围平台会直接丢弃这条数据。
常见问题 FAQ
- 桂林11.41户外跑大概消耗多少千卡？
- 按本文这条记录，11.41 公里、配速 6'14"、用时 1:11:07，消耗约 832 千卡。这个量级和体重、配速、地面坡度都有关系，同距离配速越快、消耗越高，可以作为写记录时的参考值。
- 怎么把 桂林 这次的户外跑记录做成打卡图？
- 打开 keepdata.top 的《运动截图拼图工具》，运动类型选「户外跑」，地点填 桂林·两江四湖，距离 11.41 公里，配速 6'14"，日期选 2026年07月29日，再点生成轨迹、导出图片即可，全程大约一分钟。
- 不想用轨迹曲线，只填数字能出图吗？
- 可以。生成器里切换到纯手填模式，只填距离、配速、时长、消耗这几项，同样能导出数据卡；适合室内跑、跑步机或没有 GPS 信号的场景。
- 生成的数据卡会暴露真实位置吗？
- 不会。数据卡只呈现你自己填写和生成的数字，城市与地标是文字标签，不携带任何真实定位或账号信息；图内也会标注「数据示意图 · 示例数据」。