导出与保存

导出高清图片

点击页面顶部的"保存高清图片"按钮，将当前预览卡片下载为 PNG 文件。导出过程：

  1. 将预览卡片 DOM 深度克隆到一个离屏容器中（位置设置为 left: -9999px 确保用户看不到）
  2. 剥离克隆节点上会干扰 html2canvas 栅格化的 CSS 属性——transform、boxShadow、transition 全部移除
  3. 手动将原始 Canvas 的像素数据复制到克隆 Canvas（cloneNode() 不会自动复制 Canvas 的 bitmap 缓冲区）
  4. 调用 html2canvas 将清理后的 DOM 树栅格化为 Canvas，scale 系数默认为 2（即导出尺寸是预览尺寸的两倍，保证 Retina 屏幕上的清晰度）
  5. 将 Canvas 转换为 PNG 并通过三种回退方式触发下载：首选 <a download> 方式，其次在新标签页打开 data URL，最后通过 Blob URL 下载（Safari 兼容）

导出的图片宽度可以在右侧面板的"输出尺寸"中设置。默认值为 1200px（在 scale=2 时实际渲染为 2400px）。

保存和恢复配置

点击页面底部的"保存配置"按钮，将当前所有表单数据保存到浏览器的 IndexedDB 中。保存的数据包括：所有运动参数（距离、配速、标题等）、环境数据（日期、温度、湿度、风速）、地图选择、轨迹设置、渐变色开关、输出尺寸偏好、头像照片（base64 格式）、自定义背景图片。

下次打开页面时，onload.js 会自动从 IndexedDB 读取保存的配置并通过 initInputData() 回写到表单中。如果数据库不可用（例如隐私模式下），会自动回退到 localStorage。

点击"重置"按钮可以清除所有已保存的配置，将所有表单恢复为默认值。重置操作不可撤销——建议在重置前先用"保存高清图片"导出一份当前设置的截图作为参考。

备份下载

"备份"按钮是"保存高清图片"的备用方案。某些浏览器（特别是移动端的 Safari）对 <a> 标签的 download 属性支持不完整，或者对 data URL 的长度有限制。备份按钮使用 Blob + Object URL 的方式触发下载，在大多数浏览器上兼容性更好。如果"保存高清图片"无法正常下载，试试"备份"。