轻量、纯粹、无服务端 —— 所有工具均在浏览器本地运行，绝不收集任何数据。
html-lab 是一个基于 GitHub Pages 的在线工具集合，目前已炼成 47 件仙器，涵盖图片处理、编解码、生成器、格式化、文本处理等分类。每个工具都是独立的 HTML 页面，无需后端，数据永不离开你的浏览器。
https://ace-trump-tech.github.io/html-lab/
首页以卡片形式展示所有可用工具，点击即可跳转。
| 工具名称 | 直达链接 | 功能说明 |
|---|---|---|
| Base64 编码/解码 | base64/ | 支持 UTF-8 文本（中文、emoji），在线编码解码，一键复制结果。 |
| 二维码生成器 | qrcode/ | 输入文本或网址，实时生成 QR Code，可下载为 PNG 图片。 |
| Markdown 在线预览 | markdown-preview/ | 左栏编辑右栏实时预览，快捷插入工具栏，可复制渲染后的 HTML。 |
| 文本差异对比 | diff-checker/ | 两段文本逐行 Diff，新增绿色标记、删除红色标记，统计增删行数。 |
| 字数 & 字节统计器 | word-counter/ | 实时统计字符数、字节数（UTF-8）、单词数、中文字符数、阅读时间。 |
| 工具名称 | 直达链接 | 功能说明 |
|---|---|---|
| 图片压缩 | image-compressor/ | 调整质量与缩放比例，实时预览压缩效果，纯前端 Canvas 处理。 |
| 图片格式转换 | image-converter/ | PNG / JPEG / WebP 格式互转，上传即可下载转换后的图片。 |
| 图片 Base64 转换 | image-base64/ | 图片 ⇄ Base64 字符串互转，支持 Data URI 格式。 |
| 图片裁剪 | image-cropper/ | 鼠标拖拽选择裁剪区域，自由选区，纯前端预览和下载。 |
| 图片尺寸调整 | image-resizer/ | 像素/百分比缩放，支持等比例锁定，含常用预设尺寸。 |
| 图片旋转/翻转 | image-rotator/ | 90°/180° 旋转，水平/垂直镜像翻转，实时预览。 |
| 图片水印 | image-watermark/ | 添加文字水印，可自定义文字、位置、透明度和字号。 |
| 九格切图 | image-9grid/ | 将图片切割为 3×3 九宫格，每格可单独下载。 |
| 渐变图制作 | gradient-generator/ | 可视化生成 CSS 线性/径向渐变，可复制代码或下载图片。 |
| 文字转图 | text-to-image/ | 将文字渲染为 PNG 图片，可自定义颜色、字号和背景色。 |
| 简易图片编辑 | image-editor/ | 调节亮度、对比度、饱和度、模糊等基础参数。 |
| 工具名称 | 直达链接 | 功能说明 |
|---|---|---|
| URL 编码/解码 | url-codec/ | encodeURIComponent / encodeURI 双模式，处理中文及特殊字符。 |
| HTML 实体编解码 | html-entity/ | < ⇄ < 互转，安全处理 HTML 标签和特殊符号。 |
| Unicode 编解码 | unicode-codec/ | \uXXXX / &#x / &# / U+ 多种格式互转。 |
| 摩斯电码 | morse-code/ | 文本 ⇄ 摩斯电码互转，含字母和数字对照表。 |
| JWT 解码器 | jwt-decoder/ | 解码 JWT Header 与 Payload，解析标准 Claims，检测过期状态。 |
| 工具名称 | 直达链接 | 功能说明 |
|---|---|---|
| 随机密码生成器 | password-generator/ | 基于 Web Crypto API，可配置长度与字符集，实时显示密码强度。 |
| UUID 生成器 | uuid-generator/ | 使用 crypto.randomUUID()，小写/大写/无连字符，批量生成。 |
| Lorem Ipsum 生成器 | lorem-ipsum/ | 拉丁/中文假文，支持段落/句子/单词模式。 |
| 哈希生成器 | hash-generator/ | MD5 / SHA-1 / SHA-256 / SHA-512 摘要，基于 CryptoJS。 |
| 随机数生成器 | random-number/ | 指定范围生成整数/小数，支持批量生成。 |
| 工具名称 | 直达链接 | 功能说明 |
|---|---|---|
| JSON 格式化 & 校验 | json-formatter/ | 格式化、压缩、校验 JSON，语法高亮，错误定位，转义/去转义。 |
| HTML 格式化 | html-formatter/ | 美化/压缩 HTML 代码，自动缩进。 |
| CSS 格式化 | css-formatter/ | 美化/压缩 CSS 样式，自动缩进与换行。 |
| JavaScript 格式化 | js-formatter/ | 美化/压缩 JS 代码，去除注释。 |
| SQL 格式化 | sql-formatter/ | 关键字大写、子句换行缩进，支持 SELECT/INSERT/UPDATE/DELETE。 |
| 工具名称 | 直达链接 | 功能说明 |
|---|---|---|
| 正则表达式测试器 | regex-tester/ | 实时高亮匹配，显示捕获分组与匹配位置。 |
| 大小写转换 | case-converter/ | UPPER / lower / Title / 驼峰 / 蛇形 / 短横等转换。 |
| 文本去重 | text-dedup/ | 逐行去重，大小写敏感、去除空格、保留空行选项。 |
| 文本排序 | text-sorter/ | 字母升序/降序、数字排序、随机打乱、反转顺序。 |
| 数字转中文 | number-to-chinese/ | 简体小写/繁体大写/人民币大写。 |
| 中文转拼音 | chinese-to-pinyin/ | 带声调/数字声调/无声调三种模式。 |
| 工具名称 | 直达链接 | 功能说明 |
|---|---|---|
| Unix 时间戳转换 | unix-timestamp/ | 实时时间戳显示，时间戳与日期双向互转，秒/毫秒自动识别。 |
| 颜色工具 | color-tools/ | 颜色拾取器，HEX / RGB / HSL 三者实时互转，CSS 一键复制。 |
| 进制转换 | base-converter/ | 二进制、八进制、十进制、十六进制实时联动互转。 |
| 单位换算 | unit-converter/ | 长度、重量、温度、数据存储等常用单位换算。 |
| 二维码解析 | qr-decoder/ | 上传含二维码的图片，解析出编码内容。 |
| URL 解析器 | url-parser/ | 解析 URL 各组成部分：协议/主机/路径/参数/片段。 |
| 计算器 | calculator/ | 四则运算、支持括号和键盘输入。 |
| 日期计算器 | date-calculator/ | 日期间隔天数、日期加减推算。 |
| BMI 计算器 | bmi-calculator/ | 体重指数计算、理想体重和体脂估算。 |
| 亲戚称呼计算器 | kinship-calculator/ | 中国式亲戚关系查询、称呼对照表。 |
💡 所有工具完全在浏览器本地运行，不会上传任何数据，可放心使用。
git clone https://github.com/ace-trump-tech/html-lab.git
cd html-lab
# 使用任意 HTTP 服务器，例如 Python 3
python -m http.server 8080打开浏览器访问 http://localhost:8080 即可预览。
html-lab/
├── index.html # 工具集首页
├── base64/ # Base64 编解码
├── qrcode/ # 二维码生成器
├── markdown-preview/ # Markdown 预览
├── diff-checker/ # 文本差异对比
├── word-counter/ # 字数统计
├── image-compressor/ # 图片压缩
├── image-converter/ # 图片格式转换
├── image-base64/ # 图片 Base64 转换
├── image-cropper/ # 图片裁剪
├── image-resizer/ # 图片尺寸调整
├── image-rotator/ # 图片旋转翻转
├── image-watermark/ # 图片水印
├── image-9grid/ # 九格切图
├── gradient-generator/ # 渐变图制作
├── text-to-image/ # 文字转图
├── image-editor/ # 简易图片编辑
├── url-codec/ # URL 编解码
├── html-entity/ # HTML 实体编解码
├── unicode-codec/ # Unicode 编解码
├── morse-code/ # 摩斯电码
├── jwt-decoder/ # JWT 解码器
├── password-generator/ # 随机密码生成器
├── uuid-generator/ # UUID 生成器
├── lorem-ipsum/ # Lorem Ipsum 生成器
├── hash-generator/ # 哈希生成器
├── random-number/ # 随机数生成器
├── json-formatter/ # JSON 格式化
├── html-formatter/ # HTML 格式化
├── css-formatter/ # CSS 格式化
├── js-formatter/ # JS 格式化
├── sql-formatter/ # SQL 格式化
├── regex-tester/ # 正则测试器
├── case-converter/ # 大小写转换
├── text-dedup/ # 文本去重
├── text-sorter/ # 文本排序
├── number-to-chinese/ # 数字转中文
├── chinese-to-pinyin/ # 中文转拼音
├── unix-timestamp/ # 时间戳转换
├── color-tools/ # 颜色工具
├── base-converter/ # 进制转换
├── unit-converter/ # 单位换算
├── qr-decoder/ # 二维码解析
├── url-parser/ # URL 解析器
├── calculator/ # 计算器
├── date-calculator/ # 日期计算器
├── bmi-calculator/ # BMI 计算器
├── kinship-calculator/ # 亲戚称呼计算器
└── README.md
- 在根目录下创建新文件夹，例如
my-tool/。 - 在该文件夹内新建
index.html，编写工具代码（纯前端）。 - 在根目录
index.html的对应分类中添加工具卡片和炼器总览条目。 - 提交并推送：
git add . git commit -m "feat: add new tool" git push origin main
- GitHub Pages 会自动部署，新工具即可通过
https://ace-trump-tech.github.io/html-lab/新文件夹名/访问。
- 原生 HTML5 / CSS3 / JavaScript（ES6+）
- 二维码生成：
qrcode-generator（MIT） - 二维码解析：
jsQR（MIT） - Markdown 渲染：
marked（MIT） - 哈希计算：
crypto-js（MIT） - 图片处理：HTML5 Canvas API
- 随机生成：Web Crypto API
- 响应式设计，支持移动端
- 纯前端实现，不依赖外部 API，不收集用户数据。
- 每个工具独立成文件夹，内含
index.html。 - 保持界面简洁、风格统一。
- 提交前请在主流浏览器（Chrome / Firefox / Edge）测试。
提交方式：Fork → 创建分支 → PR。
MIT © ace-trump-tech
感谢开源社区，让在线工具回归干净、安全。
⭐ 如果这个工具箱对你有帮助，请给仓库点个 Star！