桌面应用屏幕录制图像处理音视频视频处理【免费下载链接】SpinningMomo《无限暖暖》游戏摄影与录像工具。 Infinity Nikki Game Photography and Recording Tool.项目地址https://gitcode.com/gh_mirrors/sp/SpinningMomo点击查看免费下载SpinningMomo旋转吧大喵是一款《无限暖暖》游戏摄影与录像工具其中最受玩家欢迎的功能之一就是「照片地图」它把官方地图整页嵌入应用再把你拍摄过的每一张照片变成地图上的图钉聚合、悬停预览、一键跳回图库仿佛一张动态的摄影足迹墙。这篇文章揭秘它背后的核心机制——JS 注入不改官方页面一个字节仅靠一段在页面加载前注入的脚本就能接管地图并绘制你的摄影足迹。照片地图功能官方地图 你的摄影足迹先说使用体验。进入地图页后你会看到️官方地图原样加载世界切换、缩放、底图全部来自官方地图页照片图钉你拍过的照片按经纬度标注在地图上图钉里嵌着照片缩略图聚合气泡照片密集处自动聚合成带数量的圆标悬停展开照片网格️悬停卡片鼠标悬停显示照片标题与预览点击直接打开图库 lightbox筛选联动右侧地图跟随图库筛选右上角实时显示当前区域照片数量。这些体验的载体只有一个一个 iframe 一段注入脚本。下面拆解它的 4 步实现。第一步在官方页面加载前注入 JS SpinningMomo 的界面基于 WebView 构建。应用启动时map_service.cpp 会把一段打包好的桥接脚本注册为document created 脚本——这是 WebView 提供的能力任何页面包括第三方域名的文档创建时、DOM 执行任何业务代码之前先运行你注册的脚本。core::webview::register_document_created_script( app_state, extensions.infinity_nikki.map_service.bridge, script_with_eval_flag);注入脚本并非手写后直接烧录而是由 web/src/features/map/injection/source/ 下的多个子模块bridgeScript、paneStyle、popup、photoCardHtml、cluster、worldIdBridge、toolbar、render拼装生成再通过 scripts/generate-map-injection-cpp.js 压缩、切成 4KB 分块写成 C 头文件 map_injection_script.hpp。改一行 JS跑一次脚本即可重新生成工程化程度拉满。第二步钩住 Leaflet抓住官方地图实例 官方地图页基于 Leaflet 渲染。注入脚本没有去「找」地图实例而是在 Leaflet 赋值到window.L的那一刻就把构造函数换掉bridgeScript.js 用Object.defineProperty劫持window.L的 setter新赋值时给L.Map包一层代理官方代码new L.Map(...)时脚本先拿到 map 实例存入window.__SPINNING_MOMO_MAP__随后立即挂载自己的运行时 runtimeCore.js并通知宿主「我准备好了」。这就是 JS 注入最经典的玩法——猴子补丁monkey patching不改目标代码只替换它即将使用的对象从而在正确的时机介入。第三步监听世界切换同步 worldId 官方地图支持多世界/多版本切换照片点位必须与当前世界匹配。worldIdBridge.js 干了三件事从官方页面自己的localStorage.infinitynikkiMapState-v2.state.currentWorldId读取当前世界 ID读不到时回退1.1监听popstate/hashchange并给history.pushState、replaceState打补丁确保玩家在世界间穿梭时都能感知世界一变就向宿主postMessage一条SPINNING_MOMO_MAP_SESSION_READY消息。宿主侧 useMapBridge.ts 收到消息后更新currentWorldId并立即向 iframe 回推一帧点位数据。地图 iframe 由 MapIframeHost.vue 管理首次进入/map才创建懒加载离开后v-show保活避免反复冷启动。第四步postMessage 传数据照片变图钉 点位数据不经过注入脚本自己取而是走一条「宿主 → iframe」的数据管线图库筛选变化 ──▶ 后端 RPC queryPhotoMapPoints(带 worldId 筛选条件) ──▶ 返回已转换为 lat/lng 的照片点位 ──▶ postMessage: SPINNING_MOMO_SYNC_RUNTIME { markers, renderOptions, runtimeOptions } ──▶ iframe 内注入脚本重绘图钉 / 聚合 / 悬停卡片协议常量集中在 bridge/protocol.ts场景编排见 useMapScene.ts。落到渲染层render.js用L.divIcon合成「官方图钉背景 照片缩略图」的复合图钉并绑定悬停卡片逻辑cluster.js近距离照片聚合成带计数的圆标悬停时展开 3×3 照片网格还有「N 更多」的渐进展开photoCardHtml.js生成悬停卡片的 HTML标题 缩略图含escapeHtml防注入toolbar.js注入「显示/隐藏照片标点」按钮和筛选计数卡片UI 风格还按分辨率自适应。点击卡片图钉会反向postMessage一条SPINNING_MOMO_OPEN_GALLERY_ASSET宿主据此打开对应资产的 lightbox 并跳转图库——地图和图库就此闭环。数据从哪来远端地图配置 后端坐标转换 一个容易误解的点是游戏内坐标 → 地图经纬度的转换规则并不写死在客户端。后端 world_area.cpp 拉取远端 JSON 配置6 小时 TTL 内存缓存其中包含各世界的区域polygon、zRange与坐标变换参数RPC 请求extensions.infinityNikki.queryPhotoMapPoints携带当前worldId后端按区域过滤并完成坐标转换前端拿到的lat/lng拿来即用配置刷新失败时回退上一份成功缓存保证地图功能不因网络抖动整体失效。好处显而易见官方地图数据或版本一变只需更新远端 JSON无需发布新版客户端。一图看懂架构 层职责关键文件C 宿主注册注入脚本、管理 WebViewsrc/extensions/infinity_nikki/map_service.cpp构建工具JS 拼装 → 压缩 → 生成 C 头文件scripts/generate-map-injection-cpp.js注入脚本钩L.Map、同步 worldId、绘图钉/聚合/卡片web/src/features/map/injection/source/前端宿主iframe 生命周期、双向消息桥、点位拉取web/src/features/map/composables/useMapBridge.ts、bridge/protocol.ts后端远端地图配置、区域过滤、坐标转换src/extensions/infinity_nikki/world_area.cpp写在最后照片地图功能浓缩了 SpinningMomo 的核心技术思路WebView document created 脚本注入 postMessage 双向桥接。官方地图负责好看的地形与导航注入脚本负责「加戏」——画点、聚合、出卡片后端负责把游戏坐标翻译成经纬度。三层各司其职你的每一张《无限暖暖》截图与录像都成了足迹墙上的一枚图钉 。想深入了解模块职责与数据模型推荐阅读 web/src/features/map/README.md 这份地图模块维护说明。赞分享桌面应用屏幕录制图像处理音视频视频处理【免费下载链接】SpinningMomo《无限暖暖》游戏摄影与录像工具。 Infinity Nikki Game Photography and Recording Tool.项目地址https://gitcode.com/gh_mirrors/sp/SpinningMomo点击查看免费下载相关推荐旋转吧大喵照片地图使用指南在大地图上按拍摄位置标注你的游戏足迹旋转吧大喵照片地图使用指南在大地图上按拍摄位置标注你的游戏足迹 旋转吧大喵SpinningMomo是一款专为《无限暖暖》打造的游戏摄影与录像工具。它的「照桌面应用屏幕录制图像处理音视频视频处理旋转吧大喵游戏摄影图库全解析标签、评分与时间线如何帮你整理上万张游戏照片旋转吧大喵游戏摄影图库全解析标签、评分与时间线如何帮你整理上万张游戏照片 SpinningMomo旋转吧大喵是一款专为《无限暖暖》打造的 游戏摄影与录像工桌面应用屏幕录制图像处理音视频视频处理旋转吧大喵超清截图完全指南如何生成 8K 至 12K 无损游戏截图旋转吧大喵超清截图完全指南如何生成 8K 至 12K 无损游戏截图 旋转吧大喵SpinningMomo 是一款专为《无限暖暖》打造的游戏摄影与录像工具它桌面应用屏幕录制图像处理音视频视频处理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/25 10:09:44 · 阅读 1.2k 旋转吧大喵照片地图实现揭秘：JS 注入如何把官方地图变成你的摄影足迹墙
桌面应用屏幕录制图像处理音视频视频处理【免费下载链接】SpinningMomo《无限暖暖》游戏摄影与录像工具。 Infinity Nikki Game Photography and Recording Tool.项目地址https://gitcode.com/gh_mirrors/sp/SpinningMomo点击查看免费下载SpinningMomo旋转吧大喵是一款《无限暖暖》游戏摄影与录像工具其中最受玩家欢迎的功能之一就是「照片地图」它把官方地图整页嵌入应用再把你拍摄过的每一张照片变成地图上的图钉聚合、悬停预览、一键跳回图库仿佛一张动态的摄影足迹墙。这篇文章揭秘它背后的核心机制——JS 注入不改官方页面一个字节仅靠一段在页面加载前注入的脚本就能接管地图并绘制你的摄影足迹。照片地图功能官方地图 你的摄影足迹先说使用体验。进入地图页后你会看到️官方地图原样加载世界切换、缩放、底图全部来自官方地图页照片图钉你拍过的照片按经纬度标注在地图上图钉里嵌着照片缩略图聚合气泡照片密集处自动聚合成带数量的圆标悬停展开照片网格️悬停卡片鼠标悬停显示照片标题与预览点击直接打开图库 lightbox筛选联动右侧地图跟随图库筛选右上角实时显示当前区域照片数量。这些体验的载体只有一个一个 iframe 一段注入脚本。下面拆解它的 4 步实现。第一步在官方页面加载前注入 JS SpinningMomo 的界面基于 WebView 构建。应用启动时map_service.cpp 会把一段打包好的桥接脚本注册为document created 脚本——这是 WebView 提供的能力任何页面包括第三方域名的文档创建时、DOM 执行任何业务代码之前先运行你注册的脚本。core::webview::register_document_created_script( app_state, extensions.infinity_nikki.map_service.bridge, script_with_eval_flag);注入脚本并非手写后直接烧录而是由 web/src/features/map/injection/source/ 下的多个子模块bridgeScript、paneStyle、popup、photoCardHtml、cluster、worldIdBridge、toolbar、render拼装生成再通过 scripts/generate-map-injection-cpp.js 压缩、切成 4KB 分块写成 C 头文件 map_injection_script.hpp。改一行 JS跑一次脚本即可重新生成工程化程度拉满。第二步钩住 Leaflet抓住官方地图实例 官方地图页基于 Leaflet 渲染。注入脚本没有去「找」地图实例而是在 Leaflet 赋值到window.L的那一刻就把构造函数换掉bridgeScript.js 用Object.defineProperty劫持window.L的 setter新赋值时给L.Map包一层代理官方代码new L.Map(...)时脚本先拿到 map 实例存入window.__SPINNING_MOMO_MAP__随后立即挂载自己的运行时 runtimeCore.js并通知宿主「我准备好了」。这就是 JS 注入最经典的玩法——猴子补丁monkey patching不改目标代码只替换它即将使用的对象从而在正确的时机介入。第三步监听世界切换同步 worldId 官方地图支持多世界/多版本切换照片点位必须与当前世界匹配。worldIdBridge.js 干了三件事从官方页面自己的localStorage.infinitynikkiMapState-v2.state.currentWorldId读取当前世界 ID读不到时回退1.1监听popstate/hashchange并给history.pushState、replaceState打补丁确保玩家在世界间穿梭时都能感知世界一变就向宿主postMessage一条SPINNING_MOMO_MAP_SESSION_READY消息。宿主侧 useMapBridge.ts 收到消息后更新currentWorldId并立即向 iframe 回推一帧点位数据。地图 iframe 由 MapIframeHost.vue 管理首次进入/map才创建懒加载离开后v-show保活避免反复冷启动。第四步postMessage 传数据照片变图钉 点位数据不经过注入脚本自己取而是走一条「宿主 → iframe」的数据管线图库筛选变化 ──▶ 后端 RPC queryPhotoMapPoints(带 worldId 筛选条件) ──▶ 返回已转换为 lat/lng 的照片点位 ──▶ postMessage: SPINNING_MOMO_SYNC_RUNTIME { markers, renderOptions, runtimeOptions } ──▶ iframe 内注入脚本重绘图钉 / 聚合 / 悬停卡片协议常量集中在 bridge/protocol.ts场景编排见 useMapScene.ts。落到渲染层render.js用L.divIcon合成「官方图钉背景 照片缩略图」的复合图钉并绑定悬停卡片逻辑cluster.js近距离照片聚合成带计数的圆标悬停时展开 3×3 照片网格还有「N 更多」的渐进展开photoCardHtml.js生成悬停卡片的 HTML标题 缩略图含escapeHtml防注入toolbar.js注入「显示/隐藏照片标点」按钮和筛选计数卡片UI 风格还按分辨率自适应。点击卡片图钉会反向postMessage一条SPINNING_MOMO_OPEN_GALLERY_ASSET宿主据此打开对应资产的 lightbox 并跳转图库——地图和图库就此闭环。数据从哪来远端地图配置 后端坐标转换 一个容易误解的点是游戏内坐标 → 地图经纬度的转换规则并不写死在客户端。后端 world_area.cpp 拉取远端 JSON 配置6 小时 TTL 内存缓存其中包含各世界的区域polygon、zRange与坐标变换参数RPC 请求extensions.infinityNikki.queryPhotoMapPoints携带当前worldId后端按区域过滤并完成坐标转换前端拿到的lat/lng拿来即用配置刷新失败时回退上一份成功缓存保证地图功能不因网络抖动整体失效。好处显而易见官方地图数据或版本一变只需更新远端 JSON无需发布新版客户端。一图看懂架构 层职责关键文件C 宿主注册注入脚本、管理 WebViewsrc/extensions/infinity_nikki/map_service.cpp构建工具JS 拼装 → 压缩 → 生成 C 头文件scripts/generate-map-injection-cpp.js注入脚本钩L.Map、同步 worldId、绘图钉/聚合/卡片web/src/features/map/injection/source/前端宿主iframe 生命周期、双向消息桥、点位拉取web/src/features/map/composables/useMapBridge.ts、bridge/protocol.ts后端远端地图配置、区域过滤、坐标转换src/extensions/infinity_nikki/world_area.cpp写在最后照片地图功能浓缩了 SpinningMomo 的核心技术思路WebView document created 脚本注入 postMessage 双向桥接。官方地图负责好看的地形与导航注入脚本负责「加戏」——画点、聚合、出卡片后端负责把游戏坐标翻译成经纬度。三层各司其职你的每一张《无限暖暖》截图与录像都成了足迹墙上的一枚图钉 。想深入了解模块职责与数据模型推荐阅读 web/src/features/map/README.md 这份地图模块维护说明。赞分享桌面应用屏幕录制图像处理音视频视频处理【免费下载链接】SpinningMomo《无限暖暖》游戏摄影与录像工具。 Infinity Nikki Game Photography and Recording Tool.项目地址https://gitcode.com/gh_mirrors/sp/SpinningMomo点击查看免费下载相关推荐旋转吧大喵照片地图使用指南在大地图上按拍摄位置标注你的游戏足迹旋转吧大喵照片地图使用指南在大地图上按拍摄位置标注你的游戏足迹 旋转吧大喵SpinningMomo是一款专为《无限暖暖》打造的游戏摄影与录像工具。它的「照桌面应用屏幕录制图像处理音视频视频处理旋转吧大喵游戏摄影图库全解析标签、评分与时间线如何帮你整理上万张游戏照片旋转吧大喵游戏摄影图库全解析标签、评分与时间线如何帮你整理上万张游戏照片 SpinningMomo旋转吧大喵是一款专为《无限暖暖》打造的 游戏摄影与录像工桌面应用屏幕录制图像处理音视频视频处理旋转吧大喵超清截图完全指南如何生成 8K 至 12K 无损游戏截图旋转吧大喵超清截图完全指南如何生成 8K 至 12K 无损游戏截图 旋转吧大喵SpinningMomo 是一款专为《无限暖暖》打造的游戏摄影与录像工具它桌面应用屏幕录制图像处理音视频视频处理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考