使用文档

项目介绍、工具用法与部署指南。

项目简介
FFmpeg 命令生成器
本地安装 FFmpeg
JSON 格式化
本地开发与构建
部署到 Cloudflare Pages
Functions（服务端能力）
项目结构

项目简介

Person Tool 是一个纯前端多页静态站点，收纳日常常用的小工具。设计原则是隐私优先：命令拼接与数据处理都在浏览器本地完成，不上传任何文件到服务器。

技术栈刻意保持精简：原生 HTML + 原生 JavaScript + 一份共享 CSS，无需构建。直接双击打开即可用，部署时把文件夹整体上传即可。

FFmpeg 命令生成器

该工具不处理视频/音频本身，而是根据你选择的参数生成一条可复制的 ffmpeg 命令，你在本地终端粘贴执行即可。这样既方便，又不会把隐私文件上传到任何地方。支持以下任务：

任务	说明	命令要点
格式转换	视频/音频在常见容器与编码间转换	`-c:v libx264 -c:a aac` 等
压缩	通过 CRF、分辨率、码率减小体积	`-crf 28 -vf scale=-2:720`
提取音频	从视频里导出音轨	`-vn -c:a copy` 或重编码
音量/响度	增益调整或响度标准化	`volume=5dB` / `loudnorm`
剪辑截取	按开始时间 + 结束时间/时长裁剪	`-ss ... -to ... -c copy`
裁剪画面	裁出指定矩形区域	`crop=w:h:x:y`
旋转/翻转	90°/180° 旋转、水平/垂直翻转	`transpose` / `hflip` / `vflip`
变速	加速/减速播放（视频+音频）	`setpts` + `atempo`
抽取帧/截图	指定时间单帧、每 N 秒一张、缩略图网格	`-frames:v 1` / `fps=1/N,tile`
视频转 GIF	普通单步或调色板高质量两步	`palettegen` / `paletteuse`
合并	把多个视频/音频拼接为一个	concat demuxer / concat 滤镜
去掉声音	移除视频中的音轨	`-c copy -an`
去水印	对指定区域做 delogo 淡化	`delogo=x:y:w:h`
加水印	叠加图片 logo 或文字（四角位置）	`overlay` / `drawtext`
字幕	提取字幕、内嵌硬字幕、软字幕	`-map 0:s` / `subtitles=`

关于文件路径

出于浏览器安全限制，网页无法读取文件的完整绝对路径。 “选择文件”按钮只能自动填入文件名，你需要手动补全所在目录（或直接把终端里拖入的完整路径粘贴到输入框）。

本地安装 FFmpeg

# macOS (Homebrew)
brew install ffmpeg

# Ubuntu / Debian
sudo apt update && sudo apt install ffmpeg

# Windows (winget)
winget install Gyan.FFmpeg

安装后在终端执行 ffmpeg -version 验证。

JSON 格式化

支持格式化、压缩、转义/去转义、语法高亮、校验与树形折叠视图，全部在浏览器本地完成。

格式化：按所选缩进美化，并统计节点数量。
压缩：输出为无空白的单行 JSON。
转义 / 去转义：在「JSON 字符串」与「原始文本」之间转换。
文本 / 树形视图切换：树形视图可逐层折叠/展开，并支持「展开全部 / 折叠全部」。
输入时会自动尝试格式化（带防抖）；复制按钮始终复制格式化后的文本。

本地开发（无需构建）

本项目是纯静态站点，没有构建步骤：

直接双击 index.html 即可在浏览器打开使用（相对路径引用，file:// 也能正常加载）。
若想用本地服务器预览（并测试 Functions），可用 Wrangler：npm run preview（即 npx wrangler pages dev .）。

部署到 Cloudflare Pages

方式一（推荐）：连接 Git 仓库，在 Cloudflare Pages 控制台设置：

构建命令：留空（无需构建）
输出目录：/（仓库根目录）

方式二：使用 Wrangler 命令行直接部署根目录：

# 部署（等价于 npx wrangler pages deploy .）
npm run deploy

# 本地模拟 Pages 运行（含 Functions）
npm run preview

.assetsignore 会在部署时排除 README.md、wrangler.toml 等非页面文件。

Functions（服务端能力）

项目主体是静态页面，但同一个 Cloudflare Pages 部署里也可以运行服务端 Function。 functions/ 目录下的文件会按路径自动映射为接口。示例：

# 访问 /api/health 会返回 JSON
curl https://your-domain.pages.dev/api/health

对应源码在 functions/api/health.js，你可以据此扩展自己的接口。

项目结构

person-tool/
├─ index.html          # 首页（工具导航）
├─ ffmpeg.html         # FFmpeg 命令生成器
├─ json.html           # JSON 格式化
├─ docs.html           # 本文档
├─ favicon.svg         # 站点图标
├─ src/
│  ├─ common.css       # 共享样式
│  ├─ home.js          # 首页脚本
│  ├─ ffmpeg.js        # FFmpeg 命令拼接逻辑
│  └─ json.js          # JSON 处理逻辑
├─ functions/
│  └─ api/health.js    # Cloudflare Pages Function 示例
├─ .assetsignore       # 部署时排除的非页面文件
├─ package.json        # 便捷脚本（无依赖，仅 npx wrangler）
└─ wrangler.toml       # Cloudflare 部署配置